Я уже как-то рассказывал о некоторых способах определения размера экрана пользователя с помощью JS и встроенных функциях 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 вашей страницы или приложения.
Например, айфон в вертикальном расположении определится так:
<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() |
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
Подробнее