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

3 хв. читання
03 листопада 2020

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

Одним з ключових 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.

Джерело

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.3K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: orientation css, css var, вісь y