Geek Answers Handbook

How to disable landscape / portrait display in a mobile web application (Android Browser / iOS-Mobile Safari)

I am trying to turn off the phone rotation affecting the web page of one of my HTML5 mobile apps. Lack of reorganization of the layout, resizing, changing orientation.

I want you to rotate the phone and the downloadable original layout remains the same, forcing the user to use the application in its original orientation. There is a lot of subtleties in user logic, and I really feel that it is necessary in my application, so please do not leave any comments on this choice, rather help my question in the first sentence.

  • I tried listening to BOTH "changechange" and "resizing" events and calling the preventDefault and stopPropagation functions on them to prevent the browser behavior from changing when viewing the landscape view when it changes. Well, obviously, preventing ANYTHING (ideally).

    window.addEventListener("orientationchange", function (e) { e.preventDefault(); e.stopPropagation(); }, false); window.addEventListener("resize", function (e) { e.preventDefault(); e.stopPropagation(); }, false);

Made absolutely no difference. The browser is still reorganizing the page on Android (both pre2.1 and after) and iPhone 4-5.

  • proven meta tags

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

    then got angry, tried

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

    not changed.

  • I looked fiercely at StackOverflow, saw what I did in step 1. I exposed it several times ... again tried to make sure that I wasn’t messing around. Does not work.

  • sucked my pride, then decided to continue working in the brick wall because of pride, and then really pulled in his pride and placed it here.

HALP.

+8
javascript android html5 iphone mobile
source share
5 answers

The obvious solution is to use javaScript for this:

 if(window.innerHeight > window.innerWidth){ document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)"; }

When the screen rotates, turn it back.

+6
source share

I did this using the following work, which asks the user to switch back to portrait mode.
As soon as the user switches back to portrait mode, he will be allowed to interact with the application.

 <head> <style type="text/css"> #landscape{ position: absolute; top: 0px; left: 0px; background: #000000; width: 100%; height: 100%; display: none; z-index: 20000; opacity: 0.9; margin:0 auto; } #landscape div{ color: #FFFFFF; opacity: 1; top: 50%; position: absolute; text-align: center; display: inline-block; width: 100%; } </style> <script> function doOnOrientationChange() { switch(window.orientation) { case -90: document.getElementById("landscape").style.display="block"; break; case 90: document.getElementById("landscape").style.display="block"; break; default: document.getElementById("landscape").style.display="none"; break; } } //Listen to orientation change window.addEventListener('orientationchange', doOnOrientationChange); </script> </head> <body onload="doOnOrientationChange();"> <div id="landscape"><div>"Rotate Device to Portrait"</div></div> </body>
+5
source share

You cannot disable mobile orientation in a web application. What you can do is rotate the page to portrait (using css rotation from JS) when they change orientation to the horizontal model. Thus, they will be forced to use your web application in portrait mode.

You can also show them a message (only "portrait mode" when trying to view in horizontal mode)

+2
source share

Keep it short and simple !:]

 window.addEventListener('orientationchange', function () { if (window.innerHeight > window.innerWidth) { document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)"; } });
+1
source share

adding android: configChanges = "keyboardHidden | orientation" to your AndroidManifest.xml. This tells the system which configuration changes you intend to process yourself - in this case, doing nothing.

-3
source share

More articles:


All Articles