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

Question

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.

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.

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.

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.
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.

Mobile devices provide scaling and rotation for **users**, not developers. Why do you want to remove it? — RobG, Nov 16 '11 at 02:55
Comments are provided for others to comment on your question. If you don't have a good reason to prevent scale and rotation, then you can drop it from your requirements and your issue is solved. Further, your reason to remove a native UI feature should outweigh a user's need to use it. You haven't provided a reason. A good reason to allow rotation is that it enlarges the text without chaning the layout. Zooming does the same. The con is that users may need to pan to see the whole content - but that's their choice. What are your reasons for removing those features and choices? — RobG, Nov 16 '11 at 07:41
@RobG If his reasoning is correct isn't the f'n question. If he thinks his app is better without it that's up to him. I just don't think it's possible. The only thing I can think of is to snap a css rotation when the window width is greater then its height. — fancy, Nov 16 '11 at 13:31
@fancy - this is an open forum, people post, others respond. I posted as a comment, not an answer, because I won't answer the question without good reason to implement something I think breaks usability. — RobG, Nov 16 '11 at 14:02
@RobG lol, so noble - I don't think you have an answer, at least not for iOS. — fancy, Nov 16 '11 at 21:23
Just connecting a related discussion: [http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application/18400101#18400101][1] [1]: http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application/18400101#18400101 — escapedcat, Aug 23 '13 at 10:27
`Screen.lockOrientation` once it is adopted: http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application/21641809#21641809 — TMan, Feb 08 '14 at 04:22

invot · Answer 1 · 2016-08-15T17:22:14.983

7

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.

edited Aug 15 '16 at 17:22

answered May 06 '14 at 21:16

invot

533
7
30

Shouldn't it be `if(window.innerHeight > window.innerWidth){ document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)"; }` – Kunal Dethe Jun 15 '16 at 15:38
@KunalDethe Fixed. Thanks! – invot Aug 15 '16 at 17:22
1

@Matian2040 - depends on device/browser. Just an example of what to do. There are likely better solutions out there. And this probably shouldn't be done in the first place... – invot Aug 15 '16 at 17:22

score 6 · Answer 2 · answered Sep 11 '13 at 09:20

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>

I think this is a pretty elegant solution. Just my opinion :) — Helen Danger Burns, May 08 '14 at 11:01
window.orientation is not reliable. -90° can be portrait on some devices. orientation 0 is just the _default_ orientation of the device. — Pierre, May 13 '14 at 15:44

score 2 · Answer 3 · answered May 28 '12 at 14:29

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)

tfont · Answer 4 · 2017-08-16T15:57:05.930

2

Keep it short and simple! :]

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

edited Aug 16 '17 at 15:57

answered May 11 '15 at 20:27

tfont

10,891
7
56
52

2

you've got a small bug there, should be document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)"; – JackKalish Aug 11 '17 at 18:58
You are correct! Thank you. The code has been updated. – tfont Aug 16 '17 at 15:56

score -4 · Answer 5 · edited Aug 20 '18 at 12:05

-4

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">

edited Aug 20 '18 at 12:05

Luca Kiebel

9,790
7
29
44

answered Nov 16 '11 at 03:27

sanraj

47
3
9

web app, not native app. specifically, there should be a javascript solution that i have missed – SPillai Nov 16 '11 at 04:03

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

5 Answers5