device.js

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

6 января 2016 1 060

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

CodeCanyon: Лучшие SEO-плагины для WordPress
CodeCanyon: Лучшие SEO-плагины для WordPress

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-класс
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()

Напомню, в Связном очень интересные цены на iPhone, iPad и другие модели телефонов на Android и Windows. И вы пока еще успеваете на новогоднюю распродажу, которая продлится до 10 января.

 

Автор: Иван Данилин

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

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее