Screen Orientation API Demo by Aurelio De Rosa

Введение в API ориентации экрана

Каждый использует Интернет по-разному. Одни для общения, другие для просмотра фильмов, остальные, чтобы играть в игры. Для тех из вас, кто имеет доступ к Интернету, чтобы играть в игры на своем мобильном устройстве, у меня есть вопрос: вы никогда не играли в игру, которая просит вас повернуть экран? Уверен что да.

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

Что такое API Ориентации экрана?

API ориентации экрана «предоставляет возможность получать состояние ориентации экрана, информацию при изменении этого состояния, и иметь возможность заблокировать ориентацию в определённом состоянии.» Другими словами, вы сейчас можете определить ориентацию устройства пользователя (портрета и пейзажа) и зафиксировать в нужном режиме. Делая так, вы не обязаны показывать вашим пользователям анимации и надписи, указывающие необходимую ориентацию.

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

Стоит также отметить, что для блокировки экрана, веб-страницы должны быть в полноэкранном режиме (вы можете добиться этого с помощью API полноэкранного режима).

Теперь, когда вы знаете, что такое API ориентации экрана, давайте узнаем больше про его свойства и методы.

Свойства и События

API ориентации экрана наследует объект screen от объекта window и включает в себя свойство, orientation , а так же два метода: lockOrientation() и unlockOrientation() .

Свойство orientation возвращает название текущей ориентации экрана. Это значение может быть одним из следующих:

• portrait-primary : ориентация в режиме первичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся внизу.
• portrait-secondary : ориентация в режиме вторичного портрета. Для смартфона это означает, что он находится в вертикальном положении, кнопки находятся сверху (устройство лежит вверх ногами).
• landscape-primary : ориентация в режиме первичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся справа.
• landscape-secondary : ориентация в режиме вторичного пейзажа. Для смартфона это означает, что он находится в горизонтальном положении, кнопки находятся слева.

Метод lockOrientation() фиксирует экран, как если бы устройство физически вращалось в определённом положении, как показано на рисунке ниже. unlockOrientation() обратное действие. Оба метода возвращают логическое значение, которое равно true в случае успеха операции и false в противном случае.

API ориентации экрана в действии. Устройство в портретном режиме, но экран отображает информацию в режиме пейзажа.

lockOrientation() принимает одну или несколько строк, которые указывают на тип ориентации. Строки должны иметь одно из ранее упомянутых значений: orientation или portrait . Чтобы более детально указать ориентацию можно использовать либо portrait-primary и portrait-secondary , либо landscape-primary и landscape-secondary .

Пример кода, который использует этот метод и передаёт одну строку, показан ниже:

window.screen.lockOrientation('portrait');

Вот пример, который передаёт более чем одну строку:

window.screen.lockOrientation('portrait-primary', 'landscape-primary');

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

API также предоставляет событие, названное onorientationchange , которое “выстреливает” при каждом изменении ориентации экрана. Мы можем использовать это событие для обнаружения изменений ориентации и обновления пользовательского интерфейса.

Браузерная совместимость

Данное API неплохо поддерживается браузерами, в том числе при помощи браузерных префиксов. Начиная с Firefox 18+ можем воспользоваться префиксом (moz), для Internet Explorer 11+ префиксом (ms), Chrome 38+ (бета), и Opera 25+ (бета). Safari вовсе не поддерживает.

С выходом новых версий Chrome и Opera, применение API ориентации экрана значительно расширится. Так что можете смело применить его в вашем проекте. Для проверки поддержки данного API воспользуйтесь следующим кодом:

if ('orientation' in screen) < // API поддерживается! >else < // API не поддерживается :( >

Далее посмотрим применение данного API в действии.

Демо

Демо, которое мы собираемся создать, состоит из HTML кода, где мы отображаем текст, указывающий текущую ориентацию экрана. Далее, у нас есть поле выбора, чтобы указать ориентацию, в которой мы хотим зафиксировать экран. Наконец, у нас есть две кнопки: одна для блокировки экрана, а другая, чтобы разблокировать его.

Внутри кода JavaScript мы проверяем, поддерживает ли браузер этот API или нет, и какие префиксы он использует, если таковые вообще имеются. Если API не реализован в браузере мы отобразим сообщение «API не поддерживается», а кнопки будут отключены. Если API поддерживается, мы настраиваем обработчик события изменения ориентации экрана (название меняется из префиксов), где мы обновляем текст параграфа, чтобы показать текущую ориентацию.

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

Важное примечание: при разработке и тестировании данного демо-образца было найдено несколько багов в Firefox.

       * < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >body < max-width: 500px; margin: 2em auto; padding: 0 0.5em; font-size: 20px; >h1 < text-align: center; >.api-support < display: block; >.hidden < display: none; >.value < font-weight: bold; >.button-demo < padding: 0.5em; margin: 1em; >.author 
Screen Orientation API
 API not supported 
 
The orientation of the device is unavailable 
 
Lock the device in: portrait landscape portrait-primary portrait-secondary landscape-primary landscape-secondary  
 Unlock! 
 
 Demo created by Aurelio De Rosa (@AurelioDeRosa). 
This demo is part of the HTML5 API demos repository.    

Заключение

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/introducing-screen-orientation-api/
Перевел: Станислав Протасевич
Урок создан: 23 Сентября 2014
Просмотров: 12722
Правила перепечатки

5 последних уроков рубрики «Разное»

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Источник

Запретить портретную ориентацию

Доброго времени суток всем.
Для приложения возникла необходимость запретить портретную ориентацию в смартфонах. Желательно через CSS.
Для этого я прописал в:

head> meta name="viewport" content="width=device-width, initial-scale=1" /> /head>

body { display: flex; align-items: center; justify-content: center; } @media (max-width:450px){ body{ orientation: landscape; } }

Зафиксировать портретную ориентацию веб страницы (запретить landscape orientation)
нужно зафиксировать портретную ориентацию веб страницы. Пишу небольшое приложение на node.js.

Закрепить портретную ориентацию экрана
Привет! Может знает кто, как запретить поворот экрана в приложении? чтоб была только портретная.

Как настроить портретную ориентацию на Dell Latitude XT2?
Добрый день! Прошу помочь мне или дать совет. Ситуация такова: — нуждаюсь в помощи при настройке.

Запретить программе менять ориентацию экрана
Здравствуйте, форумчани. Я в FireMonkey новичок и вот, скажем так, я столкнулся с первым камнем.

Сообщение было отмечено Vahan60 как решение

Решение

@media (orientation: portrait) { body { display: none; } /* здесь можно сделать видимой какую-нибудь подсказку, в которой предложить повернуть устройство.*/ }

Спасибо, работает.
Однако, поскольку мне необходимо чтобы портретная ориентация была запрещена на смартфонах, но не на планшетах, я чуть-чуть подправил Ваш код:

media (orientation: portrait) and (max-width: 450px){ body{ display: none; } }

Добавлено через 2 часа 17 минут
DrType:
«. 5 /* здесь можно сделать видимой какую-нибудь подсказку, в которой предложить повернуть устройство.*/. «

Скиньте, пожалуйста, синтаксис подсказки.

div id="warning">Переверни смартфон!/div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

#warning { position: absolute; z-index: 10; top: 0; left: 0; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background-color: #000000; color: #ffffff; } media (orientation: portrait) and (max-width: 450px){ #warning { display: flex; } }

Как запретить скачивание файла но не запретить его исполнение.
Я составил сайт простенький. На нем у меня есть исполнительный файл в формате JAR ( Java — архив).

Питание ЮСБ -запретить отключение или запретить?
у меня вопрос- есть прибор -типа увеличительный микроскоп подключается по юсб, но иногда его.

Изменить ориентацию экрана
Не могу найти, как поменять ориентацию экрана программно, без смены шаблона. Не подскажете?

Вывести ориентацию локатора
Локатор ориентирован на одну из сторон света («С» — север, «З» — запад, «Ю» — юг, «В» — восток) и.

Тест на профессиональную ориентацию
Дифференциально-диагностический опросник Е. А. Климова "На кого пойти учиться?" Методика.

Сделать книжную ориентацию
Добрый день, как текст в документе расположить в книжной ориентации, чтобы потом можно этот кусок.

Источник