CODEWITHSUNDEEP
javascripthtmlmobile
SPillai
SPillai

Reputation: 187

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

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.

Upvotes: 13

Views: 46334

Answers (5)

tfont
tfont

Reputation: 11233

Keep it short and simple!

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

Upvotes: 3

sanraj
sanraj

Reputation: 47

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.

<activity android:name = "MyActivity" android:configChanges="keyboardHidden|orientation">

Upvotes: -4

invot
invot

Reputation: 535

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.

Upvotes: 7

Anup
Anup

Reputation: 221

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>

Upvotes: 6

Hasanavi
Hasanavi

Reputation: 8625

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)

Upvotes: 3

Related Questions