一個更容易檢測設(shè)備的JavaScript庫——device.js

JeOam 發(fā)布于2019-08-02 15:56 / 2191人閱讀

摘要：的地址是一個可以用來檢測設(shè)備的平臺操作系統(tǒng)和方向的庫。通過操作系統(tǒng)比如，安卓，黑莓，，，方向橫屏或者豎屏，類型平板或者移動設(shè)備，來為設(shè)備添加并且它還提供了一些函數(shù)用來判斷設(shè)備。比如在端打開引入了的頁面時會在標(biāo)簽里添加的。

decice.js的github地址

device.js是一個可以用來檢測設(shè)備的平臺、操作系統(tǒng)和方向的JavaScript庫。device.js 通過操作系統(tǒng)（比如 iOS，安卓，黑莓，Windows，F(xiàn)irefox OX），方向（橫屏或者豎屏），類型（平板或者移動設(shè)備），來為設(shè)備添加 CSS Class,并且它還提供了一些Javascript 函數(shù)用來判斷設(shè)備。
比如在PC端打開引入了device.js的 html 頁面時會在標(biāo)簽里添加"desktop landscape"的class。

device支持的設(shè)備

iOS: iPhone, iPod, iPad

Android: Phones & Tablets

Blackberry: Phones & Tablets

Windows: Phones & Tablets

Firefox OS: Phones & Tablets

device.js的使用

直接在html頁面的頭部引入即可使用：

根據(jù)設(shè)備的不同生成的CSS

**Device**            **CSS Classes**

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

MeeGo                 meego

Desktop               desktop

Television            television

根據(jù)方向的不同生成的CSS

**Orientation**     **CSS Classes**

Landscape             landscape

Portrait              portrait

相關(guān)的JavaScript方法

**Device**       **JavaScript Method**

Mobile             device.mobile()

Tablet             device.tablet()

Desktop            device.desktop()

iOS                device.ios()

iPad               device.ipad()

iPhone             device.iphone()

iPod               device.ipod()

Android            device.android()

Android Phone      device.androidPhone()

Android Tablet     device.androidTablet()

BlackBerry         device.blackberry()

BlackBerry Phone   device.blackberryPhone()

BlackBerry Tablet  device.blackberryTablet()

Windows            device.windows()

Windows Phone      device.windowsPhone()

Windows Tablet     device.windowsTablet()

Firefox OS         device.fxos()

Firefox OS Phone   device.fxosPhone()

Firefox OS Tablet  device.fxosTablet()

MeeGo              device.meego()

Television         device.television()

**Orientation**  **JavaScript Method**

Landscape          device.landscape()

Portrait           device.portrait()

通常情況下，我們?yōu)榱耸鬼撁嬖诓煌直媛实脑O(shè)備上展示出不同的效果，會使用CSS3的 @media屬性來實現(xiàn)，但如果我們想在 PC端和 mobile端展示兩個不同的頁面，使用device.js 就會方便很多，首先用它來檢測設(shè)備，然后再在不同的設(shè)備上打開不同的頁面。
假設(shè)有個項目，我們想讓它在手機上打開的頁面為 m.html,在電腦上打開的頁面為 desk.html,這個時候我們就可以用device.js來實現(xiàn)，代碼如下：