Ориентация

CSS медиа-функции orientation может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).

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

Синтаксис

Функция orientation указывается в качестве значения ключевого слова, выбранного из списка ниже.

Значения ключевых слов

portrait
Окно просмотра находится в портретной ориентации, то есть высота больше или равна ширине.
landscape
Окно просмотра находится в альбомной ориентации, то есть ширина больше высоты.

Пример

HTML

<div>Вставка 1</div>
<div>Вставка 2</div>
<div>Вставка 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Результат

Характеристики

Спецификация Статус Комментарий
Media Queries Level 4
Определение 'orientation' в этой спецификации.
Кандидат в рекомендации Бе изменений.
Media Queries
Определение 'orientation' в этой спецификации.
Рекомендация Начальное определение.

Совместимость браузеров

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
orientation media featureChrome Полная поддержка 3Edge Полная поддержка 12Firefox Полная поддержка 2IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка 4.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4.2Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка