Отслеживание изменения ориентации на мобильных устройствах с помощью javascript

Если ваше веб-приложение поддерживает только портретную или только горизонтальную ориентацию, велика вероятность, что часть элементов нужно будет менять в зависимости от положения устройства. Даже при «резиновой» вёрстке иногда не обойтись без JS-логики, реагирующей на поворот экрана. Разберём актуальные и устаревшие способы это сделать — и на что стоит переходить в 2026 году.

Блок типа «warning» не поддерживается.

Screen Orientation API (актуальный способ)

Современный стандартный способ определить и отследить ориентацию экрана — screen.orientation. Он даёт не только «портрет/ландшафт», но и точный тип (portrait-primary, landscape-secondary и т.д.), а событие меняется через стандартный addEventListener:

// Текущая ориентация
console.log(screen.orientation.type); // например, "portrait-primary"
console.log(screen.orientation.angle); // угол поворота в градусах

// Подписка на изменение ориентации
screen.orientation.addEventListener("change", () => {
  console.log("Новая ориентация:", screen.orientation.type);
});

Поддержка — во всех современных браузерах на Android и десктопе. В Safari/iOS долгое время была только частичная поддержка (без записи значения, только чтение), поэтому исторически на iOS чаще полагались на медиа-запросы и resize. Актуальный статус поддержки лучше сверять на caniuse.com перед продакшн-использованием.

Медиа-запросы CSS

Для чисто визуальных изменений (без JS) это по-прежнему лучший и самый надёжный вариант — работает везде, включая Safari:

/* портретная ориентация */
@media screen and (orientation: portrait) {
  /* стили для портретной */
}

/* горизонтальная ориентация */
@media screen and (orientation: landscape) {
  /* стили для горизонтальной */
}

window.matchMedia

Если нужна логика на JS, но без завязки на Screen Orientation API (например, для более широкой поддержки старых браузеров) — подойдёт matchMedia. Раньше слушатель вешали через addListener, но этот метод устарел — используйте стандартный addEventListener:

const mql = window.matchMedia("(orientation: portrait)");

if (mql.matches) {
  // Портретная ориентация
} else {
  // Горизонтальная ориентация
}

// Актуальный способ подписки (вместо устаревшего mql.addListener)
mql.addEventListener("change", (e) => {
  if (e.matches) {
    // Изменено на портретный режим
  } else {
    // Изменено на горизонтальный режим
  }
});

Событие resize

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

window.addEventListener("resize", () => {
  const isPortrait = window.innerHeight >= window.innerWidth;
  console.log(isPortrait ? "portrait" : "landscape");
});

Способ рабочий, но менее точный и семантически прозрачный, чем Screen Orientation API или matchMedia — resize срабатывает и по другим причинам (например, появление адресной строки браузера на мобильных), так что для одного лишь отслеживания ориентации сейчас лучше использовать более специализированные инструменты выше. Если же нужно отслеживать размеры конкретного элемента (а не всего окна) — актуальнее ResizeObserver.

Размеры экрана

Пара полезных свойств window, чтобы узнать реальный и «виртуальный» размер дисплея — актуальны и сегодня:

outerWidth, outerHeight: реальное разрешение окна браузера
innerWidth, innerHeight: размер видимой области страницы (viewport)

Напрямую ориентацию они не возвращают, но её легко вычислить, сравнив ширину и высоту.

Устаревшие методы (не использовать)

Раньше для этой задачи использовались ещё два подхода — сейчас от них стоит отказаться:

window.orientation — нестандартное свойство, существовавшее только в старых WebKit-браузерах (числовое значение 0/90/-90/180). Отсутствует в современных браузерах.
Событие orientationchange — нестандартное mobile-событие, также ограниченное WebKit. Вместо него используйте screen.orientation (событие change) или matchMedia.

Что использовать сегодня

Только стили → CSS-медиа-запросы @media (orientation: ...)
Нужна JS-логика → screen.orientation (Screen Orientation API)
Нужна максимальная браузерная совместимость на JS → matchMedia + addEventListener("change")
Нужно отслеживать размеры конкретного элемента → ResizeObserver

Интересно узнать, какими способами определения ориентации устройства пользуетесь вы — делитесь в комментариях.