Сьогодні у нас є мобільні пристрої, які оснащені всім - від камер до геолокації. Ми маємо маленькі комп'ютери, що вміють робити майже все, що ми хочемо.
Одним з ключових 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:
- absolute - це значення вказує, що пристрій надає абсолютні значення.
- alpha - альфа матиме значення від 0 до 360, що представлятиме рух пристрою по осі Z.
- beta - значення бета представляє рух по осі X в діапазоні від -180 до +180.
- 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.
Ще немає коментарів