一个更容易检测设备的JavaScript库——device.js

时间 2019-12-04

标签一个容易检测设备 javascript device.js device 栏目 JavaScript 繁體版

原文原文链接

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>