JSFiddle - React, Tailwind, and code Playground

by suit

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=480" />
        <title>Responsive Grid Dummy</title>
        <link rel="stylesheet" href="css/default.css" type="text/css" />
    </head>
    <body>
        <div id="output">empty</div>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script src="js/functions.js"></script>
    </body>
</html>

CSS

html {
    background: yellow;
}

body {
    background-color: red;
    padding: 0;
    width: 960px;
    margin: 0 auto;
}

#output {
    margin: 0 10px;
    padding: 10px;
    border: 1px solid blue;
}

@media only screen and (max-device-width  : 480px),
       only screen and (max-device-height : 480px) {
    @-o-viewport { width: 480px; }
     body {
        width: 480px;
        background: green;
    }
}

JavaScript

$(document).on('ready', function() {
    $(window).on('resize orientationchange', function() {
        if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)) {
            $('meta[name=viewport]').attr('content','width=' + $('body').width() + 'px');
        }
        
        $('#output').html('$(window).width(): ' + $(window).width() + '<br />window.outerWidth: ' + window.outerWidth + '<br />screen.availWidth: ' + screen.availWidth + '<br />innerWidth: ' + window.innerWidth + '<br />screen: ' + screen.width + '<br />orientation: ' + window.orientation + '<br />body: ' + $('body').width() + '<br />userAgent: ' + navigator.userAgent + '<hr />');
        $('#output').append('run<br />');
    }).trigger('resize');
});