分类: H5/JS/CSS

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

[ 2021-03-18 09:43:02 | 作者: admin ]
字号: 大 | 中 | 小

p.s. device的cdn服务器地址   https://www.bootcdn.cn/device.js/


根据设备的不同生成的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()



通常情况下，我们为了使页面在不同分辨率的设备上展示出不同的效果，会使用CSS3的 @media属性来实现，但如果我们想在 PC端和 mobile端展示两个不同的页面，使用device.js 就会方便很多，首先用它来检测设备，然后再在不同的设备上打开不同的页面。
假设有个项目，我们想让它在手机上打开的页面为 m.html,在电脑上打开的页面为 desk.html,这个时候我们就可以用device.js来实现，代码如下：

<!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>




来自：https://segmentfault.com/a/1190000007662527

[最后修改由 admin， 于 2021-03-18 10:12:19]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2776

这篇日志没有评论。

此日志不可发表评论。