Як використовувати Device Orientation API

Сьогодні у нас є мобільні пристрої, які оснащені всім - від камер до геолокації. Ми маємо маленькі комп'ютери, що вміють робити майже все, що ми хочемо.

Одним з ключових API для мобільних пристроїв є Device Orientation API.

Device Orientation API допомагає розробникам виявити орієнтацію екрану користувача і внести необхідні зміни до макету.

Наприклад, на YouTube, якщо ви нахилите телефон, показ відео почнеться в повноекранному режимі при використанні цього API.

Браузерна підтримка

API підтримується всіма основними браузерами, крім Safari і IE (підтримка з 11 версії).

Використання API

Спершу, ми повинні перевірити наявність підтримки в браузері користувача:

if (window.DeviceOrientationEvent) {
 // Supported you can continue
}

Це все, що потрібно, щоб перевірити наявність підтримки.

Після цього ми повинні відслідковувати зміни орієнтації з допомогою події deviceorientation:

window.addEventListener("deviceorientation", orientation, true);

При перевірці, ми можемо отримати чотири різних значення від API:

1. absolute – це значення вказує, що пристрій надає абсолютні значення.
2. alpha – альфа матиме значення від 0 до 360, що представлятиме рух пристрою по осі Z.
3. beta – значення бета представляє рух по осі X в діапазоні від -180 до +180.
4. gamma – останнє значення представляє рух по осі Y і має значення від -90 до +90.

Ви не повинні використовувати всі ці значення, тільки ті, які вам потрібні. Наприклад, якщо потрібно, щоб блоки рухалися щодо орієнтації пристрою буде доцільним використовувати тільки бета і гамма, наприклад, так:

function orientation(event) {
  var x = event.beta;
  var y = event.gamma;
}

Тепер ми можемо використовувати X і Y змінні для контролю за рухом блоків і щоб зробити це, всього-навсього потрібно використати CSS метод JQuery і встановити значення X для верху і Y для ліва:

function orientation(event) {
  var x = event.beta;
  var y = event.gamma;
  $('.square').css({
    'top':x,
    'left': y
  });
}

See the Pen aLhvb by Sara Vieira (@SaraVieira) on CodePen.

Джерело