Как сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим?
Пишу плеер с кастомным интерфейсом. Сейчас если на мобилке войти в полный экран то выглядит как на скрине. Если повернуть телефон то все выглядит хорошо. Необходимо чтобы при входе в полный экран этот самый экран автоматически входил в горизонтальное положение.
Я пробовал 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 => { console.error("Ошибка блокировки ориентации:", err); }); } }else{ document.exitFullscreen(); this.isFullscreen = false if (this.isMobile()) { screen.orientation.unlock(); } } }, |
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); }, |
isMobile() { // Функция для определения, является ли устройство мобильным const userAgent = navigator.userAgent || navigator.vendor || window.opera; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); },
Но код не работает, точнее вылазит следующая ошибка:
Дополнительно:
Код ваш работает.
Но блокировка ориентации не поддерживается на данном устройстве. О чем в консоли и написано.
Вообще этот АПИ не везде поддерживается, так что только так.
Попробуйте подсказать юзверю, что надо повернуть мобильник.
Обрабатывайте возвращаемый промис, и если блокировка отклонена, выводите поверх страницы баннер с просьбой перевернуть устройство. отслеживайте ориентацию, чтобы скрыть баннер, когда устройство повернется в нужное положение.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать поворот экрана в горизонтальное положение при входе в полноэкранный режим, вам необходимо использовать 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; } }
Этот код CSS применяется только в горизонтальной ориентации экрана. Он поворачивает всю страницу на 90 градусов по часовой стрелке, делая ее горизонтальной.
Затем добавьте следующий код JavaScript, чтобы обнаружить, когда пользователь входит в полноэкранный режим и применить стили CSS:
document.addEventListener("fullscreenchange", function() { if (document.fullscreenElement) { document.body.classList.add('fullscreen'); } else { document.body.classList.remove('fullscreen'); } });
Этот код JavaScript добавляет класс 'fullscreen' к элементу , когда пользователь входит в полноэкранный режим, что активирует стили CSS для поворота экрана.
Наконец, просто убедитесь, что ваша страница поддерживает полноэкранный режим, добавив следующий код:
<button>Войти в полноэкранный режим</button>
Теперь, когда пользователь нажмет на кнопку "Войти в полноэкранный режим", страница повернется в горизонтальное положение. Не забудьте учесть, что поворот экрана может повлиять на визуальное представление вашего контента, поэтому убедитесь, что все элементы на странице корректно отображаются в горизонтальном положении.