html - Disable lanscape orientation for mobile users in responsive website -

html - Disable lanscape orientation for mobile users in responsive website -

i have website, responsive (has separate media query mobile). looks great on portrait orientation, messed on landscape, wish disable landscape orientation mobile devices (android & ios @ least) before prepare it. tried vieport meta tag, doesn't much, except shows me right zoom , doesn't allow user scale, still allows alter orientation.

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

how can accomplish such effect?

the prepare can come with, rotate body or wrapper according 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 risky way thinks way.

alternative can bind window resize event.

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

html mobile screen-orientation