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

Ajian 發(fā)布于2019-08-22 10:45 / 479人閱讀

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

decice.js的github地址

device.js是一個(gè)可以用來(lái)檢測(cè)設(shè)備的平臺(tái)、操作系統(tǒng)和方向的JavaScript庫(kù)。device.js 通過(guò)操作系統(tǒng)（比如 iOS，安卓，黑莓，Windows，F(xiàn)irefox OX），方向（橫屏或者豎屏），類型（平板或者移動(dòng)設(shè)備），來(lái)為設(shè)備添加 CSS Class,并且它還提供了一些Javascript 函數(shù)用來(lái)判斷設(shè)備。
比如在PC端打開(kāi)引入了device.js的 html 頁(yè)面時(shí)會(huì)在標(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頁(yè)面的頭部引入即可使用：

根據(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)榱耸鬼?yè)面在不同分辨率的設(shè)備上展示出不同的效果，會(huì)使用CSS3的 @media屬性來(lái)實(shí)現(xiàn)，但如果我們想在 PC端和 mobile端展示兩個(gè)不同的頁(yè)面，使用device.js 就會(huì)方便很多，首先用它來(lái)檢測(cè)設(shè)備，然后再在不同的設(shè)備上打開(kāi)不同的頁(yè)面。
假設(shè)有個(gè)項(xiàng)目，我們想讓它在手機(jī)上打開(kāi)的頁(yè)面為 m.html,在電腦上打開(kāi)的頁(yè)面為 desk.html,這個(gè)時(shí)候我們就可以用device.js來(lái)實(shí)現(xiàn)，代碼如下：