Device.js 是一個可以讓你檢測裝置的平台,作業系統和方向 JavaScript 庫,它會自動在 <html>
标簽添加一些裝置平台,作業系統,方向相關的 CSS class,這樣就能讓你針對不同裝置撰寫不同的 CSS,并且還提供一些 Javascript 函數來判斷裝置。
Device.js 通過作業系統(比如 iOS,安卓,黑莓,Windows,Firefox OX),方向(橫屏或者豎屏),類型(平闆或者移動裝置),如下面在 iPhone 上的浏覽的時候在
<html>
添加的 CSS Class: 支援的裝置
- iOS: iPhone, iPod, iPad
- Android: Phones & Tablets
- Blackberry: Phones & Tablets
- Windows: Phones & Tablets
- Firefox OS: Phones & Tablets
如何使用
Device.js 使用非常簡單,隻需要在頁面的 head 載入相關的 JS 庫即可:
<script src="device.js"></script>
生成的 CSS Class:
Device | CSS Classes |
iPad | ios ipad tablet |
iPhone | ios iphone mobile |
iPod | ios ipod mobile |
Android Phone | android mobile |
Android Tablet | android tablet |
BlackBerry Phone | blackberry mobile |
BlackBerry Tablet | blackberry tablet |
Windows Phone | windows mobile |
Windows Tablet | windows tablet |
Firefox OS Phone | fxos mobile |
Firefox OS Tablet | fxos tablet |
Desktop | desktop |
Orientation | |
Landscape | landscape |
Portrait | portrait |
相關的 Javascript 函數
JavaScript Method | |
Mobile | device.mobile() |
Tablet | device.tablet() |
iOS | device.ios() |
device.ipad() | |
device.iphone() | |
device.ipod() | |
Android | device.android() |
device.androidPhone() | |
device.androidTablet() | |
BlackBerry | device.blackberry() |
device.blackberryPhone() | |
device.blackberryTablet() | |
Windows | device.windows() |
device.windowsPhone() | |
device.windowsTablet() | |
Firefox OS | device.fxos() |
device.fxosPhone() | |
device.fxosTablet() |
device.landscape() | |
device.portrait() |