Device.js — ещё один из способов определения окружающей среды пользователя

6 января 2016 6 923

Я уже как-то рассказывал о некоторых способах определения размера экрана пользователя с помощью JS и встроенных функциях WordPress. Сегодня мы пойдём немного дальше и поговорим о библиотеке Device.js.

Новые лендинги

Device.js

Библиотека Device.js позволяет писать условный CSS и/или код JavaScript в зависимости от операционной системы устройства (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV и т.д.), его ориентации (портретная или горизонтальная) и его типа (смартфон или планшет).

Безусловно, для проверки возможностей браузера пользователя, обхода его особенностей предпочтительнее использовать библиотеки типа Modernizr, которая точно определит доступность тех или иных функций HTML5/CSS3. И в случае их отсутствия, позволит осуществить откат. Поэтому, Device.js будет полезен больше для изменения интерфейса страницы или приложения на различных устройствах. Например, можно сделать версию для Android несколько иной, чем версия под iOS. Или пойти дальше и заточить, например, телефонную портретную версию под интерфейс iOS или Android. Ещё очень часто возникает необходимость отображения ссылок на онлайн-маркеты в зависимости от устройства пользователя. Например, при заходе с устройств на Android отображать ссылку на Google Play, на iPhone и iPad — AppStore, на Windows — магазин Windows Phone и т.д. Device.js с этим справляется прекрасно.

Использование Device.js

Подключение Device.js осуществляется стандартным образом.

<script src="device.js"></script>

Результат его работы заключается в добавлении соответствующего класса тегу HTML вашей страницы или приложения.

Например, iPhone в вертикальном расположении определится так:

<html lang="ru" class="ios iphone mobile portrait">

А Android-планшет в горизонтальной ориентации так:

<html lang="ru" class="android tablet landscape">

На данный момент поддерживаются следующие классы.

CSS

Устройства
УстройствоCSS-класс
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android телефонandroid mobile
Android планшетandroid tablet
BlackBerry телефонblackberry mobile
BlackBerry планшетblackberry tablet
Windows телефонwindows mobile
Windows планшетwindows tablet
Firefox OS телефонfxos mobile
Firefox OS планшетfxos tablet
MeeGomeego
Компьютерdesktop
Телевизорtelevision
Ориентация
ОриентацияCSS-класс
Горизонтальняlandscape
Портретнаяportrait

JavaScript

Device.js также поддерживает проверку устройств с помощью JavaScript.

Устройства
УстройствоМетод
Смартфонdevice.mobile()
Планшетdevice.tablet()
Компьютерdevice.desktop()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android телефонdevice.androidPhone()
Android планшетdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry телефонdevice.blackberryPhone()
BlackBerry планшетdevice.blackberryTablet()
Windowsdevice.windows()
Windows телефонdevice.windowsPhone()
Windows планшетdevice.windowsTablet()
Firefox OSdevice.fxos()

Firefox OS телефон

device.fxosPhone()
Firefox OS планшетdevice.fxosTablet()
MeeGodevice.meego()
Телевизорdevice.television()
Ориентация
ОриентацияМетод
Горизонтальняdevice.landscape()
Портретнаяdevice.portrait()

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

Лучшее за неделю
Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Добавить комментарий