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 здійснюється стандартним чином.
<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 ()