Lock website vertically

There are a few ways to do this. The first one that you can test is this hake of CSS, with it when you change the view to landscape it turns the 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 you have an exclusive material on screen orientation. And they have some methods to do a lock in the screen orientation link

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 link

screen.lockOrientation('portrait');

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 Manifesto in this way for FireFox

"orientation": "portrait"