Lock site vertically

Question

How can I prevent the contents of website stay horizontal when the user turns the phone?

Would you have any solution to viewport or Javascript?

Answer 1

There are a few ways to do this. The first one you can test is this Hake CSS, with it when you change the view for landscape It turns page -90%

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

In the official W3C documentation has an exclusive material on screen orientation. And they have some methods to lock in the screen orientation https://w3c.github.io/screen-orientation/

screen.orientation.lock('portrait')
screen.orientation.lock('landscape')
screen.orientation.unlock()

Complete example for you to test:

<script>
  var show = function() {
     console.log("Orientation type is " + screen.orientation.type);
     console.log("Orientation angle is " + screen.orientation.angle);
  }

  screen.orientation.addEventListener("change", show);
  window.onload = show;
</script>

<button onclick='screen.orientation.unlock()'>
  Unlock
</button>
<button onclick="screen.orientation.lock('portrait')">
  Lock to portrait
</button>
<button onclick="screen.orientation.lock('landscape')">
  Lock to landscape
</button>

---

Mozilla also has an api to help with this as you can see here https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

screen.lockOrientation('portrait');

Be advised: Warning: This API is experimental and Currently available on Firefox OS and Firefox for Android with a Moz prefix, and for Internet Explorer on Windows 8.1 and above with a ms prefix.

In the case of apps you can use the Manifest this way for Firefox

"orientation": "portrait"

https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS/Manifest#orientation orientation