Как выключить ландшафтную ориентацию?

Для выключения ландшафтной ориентации веб-страницы при просмотре на мобильных устройствах с поддержкой JavaScript, можно воспользоваться медиа-запросами и JavaScript API для работы с ориентацией устройства.

1. Используя медиа-запросы:
Вероятно, самый простой способ выключить ландшафтную ориентацию на мобильных устройствах - это применение CSS-правила orientation с аргументом portrait. Это можно сделать следующим образом:

   @media screen and (orientation: landscape) {
     body {
       transform: rotate(90deg);
     }
   }

В данном случае мы выбираем все устройства в ландшафтной ориентации и применяем трансформацию поворота на 90 градусов к элементу body, чтобы симулировать портретную ориентацию. Таким образом, страница останется в вертикальной ориентации, независимо от фактической ориентации устройства.

2. Используя JavaScript API:
Другой способ управления ориентацией устройства - это использование JavaScript API, предоставляемого браузерами для работы с мобильной ориентацией. С помощью этого API вы можете определить текущую ориентацию устройства и реагировать на изменение ориентации.

   // Проверка текущей ориентации устройства при загрузке страницы
   window.addEventListener("load", function() {
     if (window.orientation === 90 || window.orientation === -90) {
       // Если устройство находится в ландшафтной ориентации, изменяем ориентацию на портретную
       rotateScreen();
     }
   });

   // Определение ориентации при изменении ориентации устройства
   window.addEventListener("orientationchange", function() {
     if (window.orientation === -90 || window.orientation === 90) {
       // Если устройство находится в ландшафтной ориентации, изменяем ориентацию на портретную
       rotateScreen();
     }
   });

   // Функция для изменения ориентации экрана
   function rotateScreen() {
     // Используем префиксные свойства для поддержки различных браузеров
     var body = document.documentElement || document.body;
     if (body.requestFullscreen) {
       body.requestFullscreen();
     } else if (body.mozRequestFullScreen) {
       body.mozRequestFullScreen();
     } else if (body.webkitRequestFullscreen) {
       body.webkitRequestFullscreen();
     } else if (body.msRequestFullscreen) {
       body.msRequestFullscreen();
     }
   }

В этом примере мы обрабатываем событие load, чтобы проверить, находится ли устройство в ландшафтной ориентации при загрузке страницы. Если это так, мы вызываем функцию rotateScreen(), которая изменяет ориентацию экрана на портретную с помощью префиксных свойств. Затем мы также добавляем обработчик события orientationchange, чтобы реагировать на изменения ориентации в реальном времени.

Обратите внимание, что выбор метода зависит от ваших потребностей и требований. Если вы хотите простое и быстрое решение, медиа-запросы могут быть самым удобным вариантом. Однако, если вам требуется более гибкое управление ориентацией или вы хотите реагировать на изменения ориентации в реальном времени, использование JavaScript API может быть более подходящим вариантом.