Disable landscape orientation for mobile users in responsive website

Question

I have a website, that is responsive (has a separate media query for mobile). It looks great on portrait orientation, but messed up on landscape, so we wish to disable landscape orientation for mobile devices (Android & iOS at least) before we fix it. I tried to do so with vieport meta tag, but it doesn't do much, except shows me correct zoom and doesn't allow user to scale, but still allows to change orientation.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

How can I achieve such effect?

Answer 1

The only fix I can come up with, is to rotate your body or a wrapper according to window.orientation

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

This is a risky way but thinks its the only way.

Alternative you can bind to the window resize event.

$(window).bind("resize", function()