jquery rotate screen to portrait

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ratchet/1.0.1/ratchet.min.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
<body>
<div id="content">
<header class="bar-title">
    <button class="button">click</button>
     <h1 class="title">Mobile App</h1>
</header>
</div>
</body>
<div>foo bar</div>

CSS

html, body {
    padding: 0;
    margin: 0;
}
.content{
    -webkit-transition: all 0.1s ease-in-out;
}
@media all and (orientation: landscape) {
    .content{
        -webkit-transform:
            rotate(-90deg)
            translatex(-100%)
            ;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}

JavaScript

$(function() {
    var win = $(window);
    var onresize = function() {
        var wid = win.width();
        var hei = win.height();
        $('body').width(Math.min(wid, hei));
        $('body').height(Math.max(wid, hei));
    };
    win.resize(onresize);
    window.setTimeout(onresize, 100);
    
    $('button').click(function() {
        $('body').append('<img src="http://placekitten.com/g/150/150">');
    });
});