How to disable toggling of landscape/portrait on a mobile web app (Android Browser/iOS-Mobile Safari)

By | January 12, 2018
Questions:

I am trying to disable phone rotation affecting the web page of one of my HTML5 mobile apps. No reorganizing of the layout, resizing, orientationchange behavior.

I want it so that you rotate the phone and the initial layout loaded will stay the same, forcing the user into using the app in the original orientation. There are many subtleties to user logic and I truly feel this is needed in my app, so please no comments on that choice, rather help for my question in the first sentence.

  1. I tried listening for BOTH ‘orientationchange’ and ‘resize’ events and calling preventDefault and stopPropagation on them, to prevent any browser behavior of reorganizing the page to fit a landscape view when turned. 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. Browser still reorganized the page on Android (both pre2.1 and after) and iPhone 4-5.

  1. tried meta tags

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

    then got pissed, tried

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

    neither made a difference.

  2. looked furiously on StackOverflow, saw what I did in step 1. put out there several times…tried again to make sure I wasn’t messing something up. Didn’t work.

  3. sucked in my pride, then decided to keep running into a brick wall due to pride, then really sucked in my pride and posted here.

HALP.

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, rotate it right back.

Questions:
Answers:

I did it using the following work around, which asks user to switch back to Portrait mode.
Once the user switch back to Portrait mode, he will be allowed to interact with 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>

Questions:
Answers:

You can’t disable the mobile orientation in web app. What you can do is rotating the page to portrait (using css rotation from JS) when they change orientation to horizontal model. By this way they will be forced to use your web app in portrait mode.

You can also show them a message (“portrait mode only” when they try to view in horizontal mode)

Questions:
Answers:

Keep it short and simple! :]

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

Questions:
Answers:

adding android:configChanges=”keyboardHidden|orientation” to your AndroidManifest.xml. This tells the system what configuration changes you are going to handle yourself – in this case by doing nothing.

Leave a Reply

Your email address will not be published. Required fields are marked *