Sometimes, a responsive website looks great on Portrait orientation, but messed up on Landscape. So, a UI Developer wish to disable Landscape orientation for mobile devices (Android & iOS) before getting the website live.

Before Viewport meta tag, this is always a challenge to UI Developer to show the website in correct Zoom and also doesn’t allow user to Scale the website’s content. But nowadays it can be easily fix with viewport. For this viewport meta tag trick please read this article.

But you can’t disable toggling of landscape/portrait on a mobile web app (Android Browser/iOS-Mobile Safari) through viewport meta tag. There is no setting in viewport meta tag about rotation, so still it allows user to change orientation.

Window.orientaion / resize event

Afer some R&D I found the only fix, is to rotate your body or a wrapper according to window.orientation. With this trick, you can disable phone rotation affecting the web page. It will force your webpage to same orientation which you have set for users.

Method 1

$(function(){
 window.onorientationchange = OrientationChanged;
 window.setTimeout(OrientationChanged, 0);
 }
 function OrientationChanged(e){
 $('body').css('-webkit-transform', window.orientation % 180 == 0 ? '' : 'rotate(-90deg)');
 }

Method 2

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

Method 3

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

Enjoyed this Post?

If you enjoyed this article, feel free to share this tutorial with your friends. Thanks for reading!

You can support this website by sharing. Thank you!