Ориентация

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

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

Синтаксис

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

Ключевые значения

portrait: Виртуальный экран имеет портретную ориентацию, т.е. высота больше или равна ширине.
landscape: Виртуальный экран имеет ландшафтную ориентацию, т.е. ширина больше высоты.

Примеры

Портретная ориентация

В этом примере у нас есть три блока в HTML, и мы используем функцию orientation среды для переключения между расположением в строку (в ландшафтном режиме) и расположением в столбец (в портретном режиме).

Выходной пример вставлен в <iframe>, высота которого больше ширины, поэтому блоки выстраиваются в столбец.

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

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

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

Результат

Ландшафтная ориентация

Этот пример имеет точно такой же код, как предыдущий пример: он содержит три блока в HTML и использует функцию orientation среды для переключения между расположением в строку (в ландшафтном режиме) и расположением в столбец (в портретном режиме).

Однако в этом примере выходной пример вставлен в <iframe>, высота которого меньше ширины, поэтому блоки выстраиваются в строку.

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

CSS

body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

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

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

Спецификации

Спецификация
Media Queries Level 4 # ориентация

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`orientation`	3	12	2	10.6	5	18	4	11	4.2	1.0	≤37

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation