Ориентация

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Синтаксис

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

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

portrait

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

landscape

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

Пример

HTML

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

CSS

css
body {
  display: flex;
}

div {
  background: yellow;
}

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

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

Результат

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

Specification
Media Queries Level 4
# orientation

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
orientation media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support