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

Device.js 通过操作系统（比如 iOS，安卓，黑莓，Windows，Firefox OX），方向（横屏或者竖屏），类型（平板或者移动设备），如下面在 iPhone 上的浏览的时候在 <html> 添加的 CSS Class：

支持的设备

  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets

如何使用

Device.js 使用非常简单，只需要在页面的 head 载入相关的 JS 库即可：

<script src="device.js"></script>

生成的 CSS Class：

Device CSS Classes
iPad ios ipad tablet
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
Desktop desktop
Orientation CSS Classes
Landscape landscape
Portrait portrait

相关的 Javascript 函数

Device JavaScript Method
Mobile device.mobile()
Tablet device.tablet()
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()
Orientation JavaScript Method
Landscape device.landscape()
Portrait device.portrait()

下载：Device.js

检测设备平台，操作系统，方向 Javascript 库：Device.js的更多相关文章

  1. Device.js——检测设备平台、操作系统的Javascript 库

    http://segmentfault.com/a/1190000000373735 Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <h ...

  2. 二维码生成：使用 JavaScript 库QRCode.js生成二维码

    QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...

  3. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  4. 二维码解析：使用 JavaScript 库reqrcode.js解析二维码

    上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...

  5. 一个用于格式化和处理数字的javascript库----Numeral.js

    npm地址:https://www.npmjs.com/package/numeral 1.转化成百分比: numeral(num).format('0.00%')

  6. 使用device.js检测设备并实现不同设备展示不同网页

    现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面.这个时候可以借助device.js来检测设备,然后 ...

  7. 脸部识别JavaScript类库Tracking.js

    作者 王文刚 发布于 2014年8月10日 |   对Web开发者而言,开源的JavaScript库Tracking.js正在使计算机视觉和增强现实技术变得简单, 使用它可以展示效果类似Kinect或 ...

  8. Device.js – 快速检测平台、操作系统和方向信息

    在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...

  9. 前端笔记之JavaScript（十二）缓冲公式&检测设备&Data日期

    一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px ...

随机推荐

  1. UNP学习总结（二）

    本文是UNP复习系列的第二篇,主要包括了以下几个内容 UNIX系统下5种I/O模型 阻塞.非阻塞,同步.异步 epoll函数用例 一.Unix下的五种可用I/O模型 阻塞式I/O模型 阻塞式I/O是最 ...

  2. [BZOJ4557][JLOI2016]侦察守卫(树形DP)

    首先可以确定是树形DP,但这里存在跨子树的信息传递问题,这里就需要“借”的思想. f[i][j]表示i子树内所有点都被覆盖到,且i以外j层内的点都能被覆盖到 的方案数. g[i][j]表示i子树内离i ...

  3. 2018haoi总结

    AM T1 写了40分,有50分的暴力分,只看到n=1能用费马小定理,没看到还有一个mod质数也能用费马小定理的10分. AM T2 写了10分,60分异或方程求自由元. AM T3 现在还没搞清楚题 ...

  4. 【转载】利用一个堆溢出漏洞实现 VMware 虚拟机逃逸

    1. 介绍 2017年3月,长亭安全研究实验室(Chaitin Security Research Lab)参加了 Pwn2Own 黑客大赛,我作为团队的一员,一直专注于 VMware Worksta ...

  5. 缓存处理后，F5刷新页面，css和js返回200，为什么不是304？

    最近在Apache上做网站的静态资源缓存,但是各种配置之后,发现css和js返回的状态码都是200,为什么不是304? 找来找去在知乎上得到了答案. 来自知乎的一个回答 http://www.zhih ...

  6. 【洛谷】2120：[ZJOI2007]仓库建设【斜率优化DP】

    P2120 [ZJOI2007]仓库建设 题目背景 小B的班级数学学到多项式乘法了,于是小B给大家出了个问题:用编程序来解决多项式乘法的问题. 题目描述 L公司有N个工厂,由高到底分布在一座山上. 工 ...

  7. yyyy-MM-dd HH:mm:ss is Invalid Date in Safari, IE等浏览器下

    一.踩坑背景 在做某个项目的过程中,系统要求兼容safari,在使用Element-ui情况下,用到了datepicker组件,但是datepicker在type为daterange情况下,页面首次加 ...

  8. Python知识（1）----基础入门和进阶总结。

    今天把Python的语法过了一遍,学习了慕课网上的教程,简单易懂,1个小时就可以入门Python了.Python有两个主要的版本,Python2.7,Python3.5,后面的版本,改动较大,编写的程 ...

  9. Flash Builder 4的快捷方式和调试技巧

    Flash Builder 4的快捷方式和调试技巧 来自于flex开发人员中心:http://www.adobe.com/cn/devnet/flex/articles/flashbuilder_sh ...

  10. Adding an instance to a MEF container

    How can you add an already created instance to a MEF container/cataloge to use when resolving Import ...