У меня есть веб-игра html5, которую я разрабатываю и которая требует, чтобы мобильные устройства были в альбомном режиме.
Поскольку я не могу принудительно вращать некоторые устройства / браузеры (Safari), чтобы настроить альбомную ориентацию, я просто вращаю свой HTML-контент с помощью приведенного ниже CSS.
Проблема, с которой я столкнулся, заключается в том, что на мобильных устройствах (iPhone), если пользователь заблокировал свое устройство в портретном режиме, это портит впечатление (рамка браузера не будет вращаться в соответствии с содержимым ландшафта).
Мне нужно отобразить сообщение, чтобы сообщить им, что им нужно разблокировать устройства. Я не смог определить, существует ли какой-либо метод javascript для обнаружения, если их мобильное устройство явно заблокировано в портретном режиме. Я нашел старые посты (2015), в которых говорилось, что это невозможно, но я надеюсь, что поддержка функций улучшилась. Я ознакомился с API-интерфейсом «Ориентация экрана», однако ориентация по умолчанию отличается от явной заблокированной ориентации.
Мой CSS для форсирования ландшафта:
@media only screen and (max-device-width: 1024px) and orientation:portrait) {
body {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
}