Определение ориентации экрана и вывод сообщения на JS

Быстрый ответ

// Определение портретной ориентации происходит так же уверенно, как Шерлок Холмс находит подсказки
if (window.matchMedia("(orientation: portrait)").matches) {
  alert("Шерлок на связи: для оптимального просмотра поверните устройство, Ватсон!");
}

Как отслеживать изменение ориентации

Рассмотрим три метода отслеживания и реакции на изменение ориентации экрана:

Использование события orientationchange

Добавьте обработчик события orientationchange для моментальной обработки изменений ориентации и информирования пользователя.

window.addEventListener('orientationchange', function() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    alert("Переверните устройство, подобно вашей любимой книге, для более комфортного чтения!");
  }
});

Подробнее об этом расскажет наш спикер на видео

Создание функций для проверки ориентации

Определите вспомогательные функции isPortrait() и isLandscape() для более читаемого кода.

function isPortrait() {
  // Проверка, превышает ли высота ширину, как у городского пейзажа
  return window.innerHeight > window.innerWidth;
}

function isLandscape() {
  // Определяем, больше ли ширина высоты, как у раскрытой карты
  return window.innerWidth > window.innerHeight;
}

if (isPortrait()) {
  alert("Поверните устройство горизонтально, чтобы разглядеть всю карту!");
}

Совместимость с различными браузерами

Учтите, что свойство window.orientation считается устаревшим в некоторых браузерах, поэтому рекомендуется использовать window.matchMedia для поддержки всех пользователей.

Особенности и проблемы

В процессе определения ориентации могут возникнуть сложности:

• Виртуальные клавиатуры могут изменять размеры видимой области экрана.
• Частая смена ориентации вызывает необходимость дебаунсинга, чтобы предотвратить множество событий.

Визуализация

Представим наглядно, как происходит определение ориентации экрана:

Экран устройства: [Горизонтальный] ↔️ <= **Без уведомлений**
Экран устройства: [Вертикальный] ⬆️⬇️ <= **Уведомление:** 📢 "Поверните устройство немного!"

Почему это важно?

Горизонтальный: [🛋️ Расслабьтесь и наслаждайтесь просмотром]
Вертикальный: [📢 "Поверните устройство для удобства просмотра!"]

Стратегии надежного определения ориентации

Учет действия виртуальной клавиатуры

Для точного определения ориентации необходимо учитывать воздействие виртуальной клавиатуры, используя screen.availHeight и screen.availWidth.

function hasKeyboard() {
  // Проверяем, не скрывает ли виртуальная клавиатура часть экрана
  return window.innerHeight < screen.availHeight;
}

if (isPortrait() && !hasKeyboard()) {
  alert("Поверните устройство для полноэкранного просмотра!");
}

Использование CSS-медиазапросов в сочетании с JavaScript

CSS3 медиазапросы идеально подходят для стилизации, но не для функциональности JavaScript. Сочетая их, вы получите максимальный эффект.

Тестирование на различных устройствах

Критически важно проводить тестирование на различных устройствах, чтобы убедиться в корректной работе вашего кода на всех экранах.

Полезные материалы

1. Метод Window: matchMedia() – Web API | MDN – обучение использованию matchMedia для проверки медиазапросов в JavaScript.
2. CSS-медиазапросы – знакомство с медиазапросами для адаптивного дизайна в CSS3.
3. Событие onresize – примеры использования события изменения размера окна в JavaScript для динамического адаптивного дизайна.
4. Свойство Window: orientation – Web API | MDN – определение характеристик ориентации устройства с помощью JavaScript.
5. Полное руководство по CSS-медиазапросам | CSS-Tricks – подробное руководство по написанию и использованию медиазапросов в CSS.
6. Дебаунсинг и троттлинг: объяснение на примерах | CSS-Tricks – разъяснение оптимизации обработки событий с помощью дебаунсинга и троттлинга.