• 欢迎浏览“String me = Creater\忠实的资深Linux玩家;”,请文明浏览,理性发言,有侵犯你的权益请邮件我(creater@vip.qq.com).
  • 把任何的失败都当作一次尝试,不要自卑;把所有的成功都想成是一种幸运,不要自傲。
  •    1年前 (2017-04-28)  web前端 |   抢沙发  8 
    文章评分 0 次,平均分 0.0

    decice.js的github地址(https://github.com/matthewhudson/device.js/)

    device.js是一个可以用来检测设备的平台、操作系统和方向的JavaScript库。device.js 通过操作系统(比如 iOS,安卓,黑莓,Windows,Firefox OX),方向(横屏或者竖屏),类型(平板或者移动设备),来为设备添加 CSS Class,并且它还提供了一些Javascript 函数用来判断设备。
    比如在PC端打开引入了device.js的 html 页面时会在标签里添加"desktop landscape"的class。
    device.js的使用
    直接在html页面的头部引入即可使用:

    <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来实现,代码如下:

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

    除特别注明外,本站所有文章均为String me = "Creater\忠实的资深Linux玩家";原创,转载请注明出处来自http://unix8.net/home.php/5480.html

    关于

    发表评论

    暂无评论

    切换注册

    登录

    忘记密码 ?

    切换登录

    注册

    扫一扫二维码分享