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

Я уже как-то рассказывал о некоторых способах определения размера экрана пользователя с помощью 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 вашей страницы или приложения.

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

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

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

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

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

CSS

Устройства

Устройство	CSS-класс
iPad	ios ipad tablet
iPhone	ios iphone mobile
iPod	ios 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
MeeGo	meego
Компьютер	desktop
Телевизор	television

Ориентация

Ориентация	CSS-класс
Горизонтальня	landscape
Портретная	portrait

JavaScript

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

Устройства

Устройство	Метод
Смартфон	device.mobile()
Планшет	device.tablet()
Компьютер	device.desktop()
iOS	device.ios()
iPad	device.ipad()
iPhone	device.iphone()
iPod	device.ipod()
Android	device.android()
Android телефон	device.androidPhone()
Android планшет	device.androidTablet()
BlackBerry	device.blackberry()
BlackBerry телефон	device.blackberryPhone()
BlackBerry планшет	device.blackberryTablet()
Windows	device.windows()
Windows телефон	device.windowsPhone()
Windows планшет	device.windowsTablet()
Firefox OS	device.fxos()
Firefox OS телефон	device.fxosPhone()
Firefox OS планшет	device.fxosTablet()
MeeGo	device.meego()
Телевизор	device.television()

Ориентация

Ориентация	Метод
Горизонтальня	device.landscape()
Портретная	device.portrait()