Ориентация экрана — объект Screen и его Orientation API

Screen Orientation API отличается от вышеописанного, хоть и частично пересекается по функционалу. Как можно догадаться по названию, речь тут идет об ориентации экрана, что подразумевает устройства с возможностью изменения этого параметра.

Основная составляющая данного интерфейса — это объект Screen, его свойство (только для чтения) orientation, содержащее текстовую информацию об ориентации экрана, и событие orientationchange, наступающее при смене ориентации экрана или при ее начальной установке:

<!DOCTYPE html>

<html>

<script>

Screen. addEventListener("orientationchange", function() {

Alert("Screen orientation state is " + screen. mozOrientation ); }, false);

</script>

</html>

Этот код (правда, с использованием vendor-префикса) дает результат даже на моем условно-стационарном ноутбуке (рис. 132). Всего свойство screen. orientation может принимать четыре значения:

- portrait-primary;

- portrait-secondary;

- landscape-primary;

- landscape-secondary.

Рис. 132. Проверка ориентации экрана

Первые два относятся к книжной, вторые — к альбомной ориентации. Различие между primary и secondary состоит в учете того, какая ориентация является для устройства «естественной». То есть если планшет устанавливает по умолчанию альбомную ориентацию, screen. orientation примет значение landscape-primary. При его изменении — portrait-secondary.

Объект Screen, согласно спецификации, обладает также следующими методами:

- lockOrientation(orientation) — устанавливает неизменную ориентацию экрана;

- UnlockOrientation() — снимает блокировку ориентации экрана. При этом ориентация должна вернуться в состояние по умолчанию.

Применение Screen Orientation API очевидно — правильное расположение и адаптивная компоновка контента.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *