How to lock viewport to Portrait Orientation in HTML5/CSS3

Question

Is it possible to lock the view port's orientation to portrait on a mobile device?

I Googled it but could not find out exactly how to do it.

Solution 1

As my experience, it cannot be done as you are access the website from the browser. Which should have the lock orientation capability is the browser itself - e.g Safari, Chrome. Your HTML CSS code will not be feasible to control it.

For example when you are building a hybrid mobile app - meaning an application with html css and js then convert it to mobile app with wrapper as a web view inside. Then you are capable to lock the screen orientation. There are some configuration need to be done and later on these will be converted to Objective C or Java.

Solution 2

This trick should work:

    @media screen and (orientation: landscape) {
      html {
        /* Rotate the content container */
        transform: rotate(-90deg);
        transform-origin: left top;
        /* Set content width to viewport height */
        width: 100vh;
        /* Set content height to viewport width */
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
      }
    }

<h1>Test</h1>

If you need this to only be applied on mobile devices, you can do some javascript tricks to identify the device type, and if a mobile device, you add a class is-mobile-device or something, and specify html.is-mobile-device as the selector in the style definition. You may already use a framework that adds classes for different device types already, so you can specify those.

Note that this will not actually lock the orientation, just make the page look like it is locked.

Solution 3

It is possible using PWA (progressive web app) setup, but only when the PWA is "installed" (added to homescreen). Browser support may be varied but in my opinion is pretty good.

When you create your web-manifest, set the "orientation" property

For the full guide, read here.

Solution 4

With CSS we could use; it's possible this works on IPhone:

 @viewport {  
   orientation: portrait;  
 }  

Here is a link we could add which basically does the same thing:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

This may not work on all browsers but hopefully will help. This uses JavaScript to "lock" the orientation & also the 2nd one adds an EventListener to the screen to identify the orientation.

This is how we would lock the orientation:

screen.lockOrientation('portrait');

This is how we would log the orientation:

screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " + screen.orientation);
});

Solution 5

If you need this change only for the phone, you can use a combined-media query like follows. for more accuracy you can use (pointer: coarse) for the touch devices

/* 
  CSS: For most of the phones 
  812px - for iphone x
*/

@media only screen and (pointer: coarse) and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

MDN @media - pointer support

View more solutions

Comments

[H. Ferrence]

Ok, thank you @Catto. Does this handle "lock" ? Or are you interpreting my question to be "log" ?

[H. Ferrence]

It did not work on Safari on an iPhone 6s running iOS 9.3.2

[Catto]

Now the answer incorporates the lock command as well. I was afraid it didn' t work on Safari. But something along these lines might be the answer. I'll keep researching.

[H. Ferrence]

Ok, thanks. The screen.lockOrientation('portrait'); does not work on my iPhone.

[H. Ferrence]

Nah, the css answer did not work on my iPhone6 either.

[Catto]

Maybe try that link just posted

[pstanton]

it is a pretty big leap to suggest going from a browser solution to a native app+webview