Ориентация экрана — объект 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 очевидно — правильное расположение и адаптивная компоновка контента.
Добавить комментарий