Управление ориентацией экрана

Термин ориентация экрана относится к тому, находится ли область просмотра браузера viewport в режиме ландшафта (то есть ширина области просмотра больше её высоты) или в режиме портрета (высота области просмотра больше её ширины).

CSS предоставляет средство orientation для настройки макета на основе ориентации экрана.

API ориентации экрана предоставляет программируемый JavaScript API для работы с ориентацией экрана, включая возможность блокировки области просмотра в определённой ориентации.

Один из наиболее распространённых случаев для изменения ориентации — это пересмотр макета вашего содержимого на основе ориентации устройства. Например, вы можете захотеть, чтобы панель кнопок растягивалась вдоль наибольшего измерения дисплея устройства. С помощью медиа-запроса вы можете легко и автоматически это сделать.

Давайте рассмотрим пример с следующим кодом HTML

<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec
  sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt
  leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut
  interdum tristique dapibus. Nullam quis malesuada est.
</p>

CSS использует медиа-запрос ориентации для обработки специфических стилей на основе ориентации экрана

/* First let's define some common styles */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font: 1em sans-serif;
  margin: 0;
  padding: 0.5em;
}

ul {
  list-style: none;

  font: 1em monospace;
  margin: 0;
  padding: 0.5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin: 0;
  padding: 0.5em;
  background: white;
}

После определения общих стилей можно начать определение специального случая для ориентации

/* For portrait, we want the toolbar on top */

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* For landscape, we want the toolbar stick on the left */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: 0.5em;
  }
}

И вот результат

Некоторые устройства (в основном мобильные) могут динамически изменять ориентацию экрана в зависимости от собственной ориентации, гарантируя, что пользователь всегда сможет прочитать содержимое на экране. Хотя такое поведение идеально подходит для текстового контента, оно может негативно повлиять на некоторые виды контента. Например, игры, основанные на ориентации устройства, могут быть нарушены таким изменением ориентации.

API ориентации экрана предназначен для предотвращения или обработки таких изменений.

Каждый раз, когда ориентация экрана изменяется, событие change интерфейса ScreenOrientation срабатывает:

screen.orientation.addEventListener("change", () => {
  console.log(`The orientation of the screen is: ${screen.orientation}`);
});

Любое веб-приложение может заблокировать экран в соответствии со своими потребностями. Экран блокируется с помощью метода screen.orientation.lock(), а разблокируется с помощью метода screen.orientation.unlock().

Метод screen.orientation.lock() принимает одно из следующих значений, чтобы определить тип блокировки: any, natural. portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, и landscape:

screen.orientation.lock();

Он возвращает промис, который разрешается после успешной блокировки.

• screen.orientation
• ScreenOrientation
• change событие интерфейса ScreenOrientation
• Медиа-запрос ориентации