Как сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим?

Пишу плеер с кастомным интерфейсом. Сейчас если на мобилке войти в полный экран то выглядит как на скрине. Если повернуть телефон то все выглядит хорошо. Необходимо чтобы при входе в полный экран этот самый экран автоматически входил в горизонтальное положение.
Я пробовал screen.orientation.lock("landscape"). Не очень оно и работает ( код функции ниже )

toggleFullscreen(){       if(document.fullscreenElement == null){         this.$refs.videoContainer.requestFullscreen();         this.isFullscreen = true;                   if (this.isMobile()) {           // Запрещаем поворот экрана в вертикальное положение           screen.orientation.lock("landscape").catch(err =&gt; {             console.error("Ошибка блокировки ориентации:", err);           });         }       }else{         document.exitFullscreen();         this.isFullscreen = false          if (this.isMobile()) {           screen.orientation.unlock();         }       }     },

1

toggleFullscreen(){ if(document.fullscreenElement == null){ this.$refs.videoContainer.requestFullscreen(); this.isFullscreen = true; if (this.isMobile()) { // Запрещаем поворот экрана в вертикальное положение screen.orientation.lock("landscape").catch(err => { console.error("Ошибка блокировки ориентации:", err); }); } }else{ document.exitFullscreen(); this.isFullscreen = false if (this.isMobile()) { screen.orientation.unlock(); } } },

Код выше - функция обработчик на кнопку полноэкранного режима, там я и использую этот screen.orientation.
Функция чтобы узнать что юзер с мобилки сидит:

isMobile() {       // Функция для определения, является ли устройство мобильным       const userAgent = navigator.userAgent || navigator.vendor || window.opera;       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);     },

1	isMobile() { // Функция для определения, является ли устройство мобильным const userAgent = navigator.userAgent \|\| navigator.vendor \|\| window.opera; return /Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry\|IEMobile\|Opera Mini/i.test(userAgent); },

Но код не работает, точнее вылазит следующая ошибка:

Дополнительно:

Код ваш работает.
Но блокировка ориентации не поддерживается на данном устройстве. О чем в консоли и написано.

Вообще этот АПИ не везде поддерживается, так что только так.

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

+ Заказать

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

Есть ответ
07.04.2024

Ответить

Для того чтобы сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим, вам необходимо использовать JavaScript и CSS.

Сначала добавьте следующий код CSS в ваш файл стилей или внутри тега на вашей странице:

@media screen and (orientation: landscape) {
  body {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

@media screen and (orientation: landscape) {

body {

transform: rotate(90deg);

transform-origin: left top;

width: 100vh;

height: 100vw;

overflow-x: hidden;

position: absolute;

top: 100%;

left: 0;

}

Этот код CSS применяется только в горизонтальной ориентации экрана. Он поворачивает всю страницу на 90 градусов по часовой стрелке, делая ее горизонтальной.

Затем добавьте следующий код JavaScript, чтобы обнаружить, когда пользователь входит в полноэкранный режим и применить стили CSS:

document.addEventListener("fullscreenchange", function() {
  if (document.fullscreenElement) {
    document.body.classList.add('fullscreen');
  } else {
    document.body.classList.remove('fullscreen');
  }
});

1

2

3

4

5

6

7

document.addEventListener("fullscreenchange", function() {

if (document.fullscreenElement) {

document.body.classList.add('fullscreen');

} else {

document.body.classList.remove('fullscreen');

}

});

Этот код JavaScript добавляет класс 'fullscreen' к элементу , когда пользователь входит в полноэкранный режим, что активирует стили CSS для поворота экрана.

Наконец, просто убедитесь, что ваша страница поддерживает полноэкранный режим, добавив следующий код:

<button>Войти в полноэкранный режим</button>

1	<button>Войти в полноэкранный режим</button>

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

Как сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно