Введення в api орієнтації екрану

Причиною, чому ви повинні повернути екран, є те, що призначений для користувача інтерфейс був розроблений для конкретного режиму, портрет або пейзаж. Якщо веб-додаток має ту саму потребу, або ви розробляєте будь-яку гру: скористайтеся API орієнтації екрану. У цій статті я розповім, що це таке.

Що таке API Орієнтації екрану?

API орієнтації екрану "надає можливість отримувати стан орієнтації екрану, інформацію при зміні цього стану, і мати можливість заблокувати орієнтацію в певному стані." Іншими словами, ви зараз можете визначити орієнтацію пристрою користувача (портрета і пейзажу) і зафіксувати в потрібному режимі. Роблячи так, ви не зобов'язані показувати вашим користувачам анімації і написи, що вказують необхідну орієнтацію.

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

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

Тепер, коли ви знаєте, що таке API орієнтації екрану, давайте дізнаємося більше про його властивості та методи.

Властивості і Події

API орієнтації екрану успадковує об'єкт screen від об'єкта window і включає в себе властивість, orientation. а так само два методи: lockOrientation () і unlockOrientation ().

Властивість orientation повертає назву поточної орієнтації екрану. Це значення може бути одним з наступних:

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

API орієнтації екрану в дії. Пристрій в портретному режимі, але екран відображає інформацію в режимі пейзажу.

lockOrientation () приймає одну або кілька рядків, які вказують на тип орієнтації. Рядки повинні мати одне з раніше згаданих значень: orientation або portrait. Щоб більш детально вказати орієнтацію можна використовувати або portrait-primary і portrait-secondary. або landscape-primary і landscape-secondary.

Приклад коду, який використовує цей метод і передає один рядок, показаний нижче:

Ось приклад, який передає більш ніж один рядок:

Метод unlockOrientation () використовується, щоб прибрати раніше встановлену фіксацію і дозволяє повертати екран в будь-якому положенні.

API також надає подія, назване onorientationchange. яке "вистрілює" при кожній зміні орієнтації екрану. Ми можемо використовувати цю подію для виявлення змін орієнтації і поновлення користувальницького інтерфейсу.

браузерна сумісність

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

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

Далі подивимося застосування даного API в дії.

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

Нарешті, ми створюємо ще два обробника. У перший вставляємо сторінку в повноекранному режимі і фіксуємо екран, вказаний в полі вибору. У другому ми прибираємо фіксацію і виходимо з повноекранного режиму.

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

висновок

У цій статті ми обговорили API орієнтації екрану. На даний момент в ньому є одна властивість, яка визначає орієнтацію екрану і два методи. Перший метод дозволяє зафіксувати екран в заданому положенні, а другий знімає фіксацію. Наостанок ми розглянули як можна дізнатися, коли відбувається зміна орієнтації.

Як ви могли переконатися, дане API досить просте у використанні. Браузерна підтримка теж хороша, так що це дійсно те, що ви можете використовувати в своїх проектах.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!