资讯专栏INFORMATION COLUMN

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

JeOam / 1986人阅读

摘要:的地址是一个可以用来检测设备的平台操作系统和方向的库。通过操作系统比如,安卓,黑莓,,,方向横屏或者竖屏,类型平板或者移动设备,来为设备添加并且它还提供了一些函数用来判断设备。比如在端打开引入了的页面时会在标签里添加的。

decice.js的github地址

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

device支持的设备

iOS: iPhone, iPod, iPad

Android: Phones & Tablets

Blackberry: Phones & Tablets

Windows: Phones & Tablets

Firefox OS: Phones & Tablets

device.js的使用

直接在html页面的头部引入即可使用:


根据设备的不同生成的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来实现,代码如下:




    
    device.js的使用
    


    


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54384.html

相关文章

  • 一个容易检测设备JavaScript——device.js

    摘要:的地址是一个可以用来检测设备的平台操作系统和方向的库。通过操作系统比如,安卓,黑莓,,,方向横屏或者竖屏,类型平板或者移动设备,来为设备添加并且它还提供了一些函数用来判断设备。比如在端打开引入了的页面时会在标签里添加的。 decice.js的github地址 device.js是一个可以用来检测设备的平台、操作系统和方向的JavaScript库。device.js 通过操作系统(比如 ...

    Ajian 评论0 收藏0
  • Device.js——检测设备平台、操作系统Javascript

    摘要:是一个可以让你检测设备的平台,操作系统和方向库,它会自动在标签添加一些设备平台,操作系统,方向相关的,这样就能让你针对不同设备撰写不同的,并且还提供一些函数来判断设备。 Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 标签添加一些设备平台,操作系统,方向相关的 CSS class,这样就能让你针对不同设备撰写不同的 CSS,并且...

    JessYanCoding 评论0 收藏0
  • 不可错过javascript迷你

    摘要:主张,小而美被实践是最好用的,本文将介绍笔者收集的一些非常赞的开源库。是带有消息通知的数据中心,我称其为会说话的数据。迷你检查库,这个几乎涵盖了全部的各种检测。最后向大家推荐依稀,这里收集了太多小而美的库,自己来淘宝吧。 最近看着下自己的github star,把我吓坏了,手贱党,收藏癖的我都收藏了300+个仓库了,是时候整理一下了。 Unix主张kiss,小而美被实践是最好用的,本文...

    zhangqh 评论0 收藏0
  • js判断移动端与pc端

    摘要:这里介绍使用插件来判断移动端设备地址示例移动端地址移动端端地址端更多设备判断如下表格可以使用冒号来定义对齐方式移动端设备方向判断有公众号啦欢迎关注,不定期推荐前端技术 这里介绍使用device.js插件来判断移动端设备 地址:https://github.com/matthewhud... 示例: if(device.mobile()){ window.location.hr...

    guyan0319 评论0 收藏0
  • 前端插件

    摘要:原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库,目的是强化表格操作如搜索排序,并自动加入组件引入表格中,使用非常灵活简便。由推出,灵活扎实的建议列表函数库。 原文链接:前端插件库站点:前端开发文档博客:前端插件库 前端插件库 DataTables 官网:https://www.datatables.net/ DataTables是jQuery的JavaScr...

    高胜山 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<