Вы можете попробовать что-то вроде этого:
lockAllowed = window.screen.lockOrientation(orientation);
Вы можете найти больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
на chrome что-то вроде этого должно работа
var lockFunction = window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
console.log('Orientation locked')
} else {
console.error('There was a problem in locking the orientation')
}
в основном вам нужно только указать, какая ориентация вам нужна (ландшафт в вашем случае). Это решение, которое, я не уверен, будет работать на мобильных устройствах.
Так что для мобильных устройств вы также можете попытаться создать манифест. json
<link rel="manifest" href="http://yoursite.com/manifest.json">
{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"landscape"
}
Единственное решение может просто вращать все на основе x и y экрана (используя холст прямоугольник), чтобы вы могли вращаться, когда x> y, и вращаться снова, когда это изменение (пользователь должен видеть ландшафт только таким образом).