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

decice.js的github地址javascript

device.js是一個能夠用來檢測設備的平臺、操做系統和方向的JavaScript庫。device.js 經過操做系統(好比 iOS,安卓,黑莓,Windows,Firefox OX),方向(橫屏或者豎屏),類型(平板或者移動設備),來爲設備添加 CSS Class,而且它還提供了一些Javascript 函數用來判斷設備。
好比在PC端打開引入了device.js的 html 頁面時會在<html>標籤裏添加"desktop landscape"的class。
圖片描述html

device支持的設備

  • iOS: iPhone, iPod, iPadjava

  • Android: Phones & Tabletsandroid

  • Blackberry: Phones & Tabletsios

  • Windows: Phones & Tabletsgit

  • Firefox OS: Phones & Tabletsgithub

device.js的使用

直接在html頁面的頭部引入便可使用:windows

<script type="text/javascript" src="device.js"></script>

根據設備的不一樣生成的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

根據方向的不一樣生成的CSS

**Orientation**     **CSS Classes**

Landscape             landscape

Portrait              portrait

相關的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()

一般狀況下,咱們爲了使頁面在不一樣分辨率的設備上展現出不一樣的效果,會使用CSS3@media屬性來實現,但若是咱們想在 PC端和 mobile端展現兩個不一樣的頁面,使用device.js 就會方便不少,首先用它來檢測設備,而後再在不一樣的設備上打開不一樣的頁面。
假設有個項目,咱們想讓它在手機上打開的頁面爲 m.html,在電腦上打開的頁面爲 desk.html,這個時候咱們就能夠用device.js來實現,代碼以下:iphone

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>device.js的使用</title>
    <script type="text/javascript" src="device.js"></script>
</head>
<body>
    <script type="text/javascript">
        var isMobile = device.mobile(),
             isTable = device.tablet();

        if(isMobile || isTable){
            window.open("m.html","_self"); //若是終端是手機或者平板,就打開m.html
        }
        else{
            window.open("desk.html","_self"); //不然打開desk.html
        }
    </script>
</body>
</html>
相關文章
相關標籤/搜索