检测设备平台,操作系统,方向 Javascript 库:Device.js
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的更多相关文章
- Device.js——检测设备平台、操作系统的Javascript 库
http://segmentfault.com/a/1190000000373735 Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <h ...
- 二维码生成:使用 JavaScript 库QRCode.js生成二维码
QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- 二维码解析:使用 JavaScript 库reqrcode.js解析二维码
上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...
- 一个用于格式化和处理数字的javascript库----Numeral.js
npm地址:https://www.npmjs.com/package/numeral 1.转化成百分比: numeral(num).format('0.00%')
- 使用device.js检测设备并实现不同设备展示不同网页
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面.这个时候可以借助device.js来检测设备,然后 ...
- 脸部识别JavaScript类库Tracking.js
作者 王文刚 发布于 2014年8月10日 | 对Web开发者而言,开源的JavaScript库Tracking.js正在使计算机视觉和增强现实技术变得简单, 使用它可以展示效果类似Kinect或 ...
- Device.js – 快速检测平台、操作系统和方向信息
在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...
- 前端笔记之JavaScript(十二)缓冲公式&检测设备&Data日期
一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px ...
随机推荐
- Django小知识点整理
一.Django中Choices字段显示中文的两种方式 1.get_xxxx_display():这种方式只能针对对象来使用 {% for row in server_list %} <li&g ...
- Centos 安装 WPS
Linux有自己的一套类是Office的办公软件:LibreOffice,但是不是很友好,幸好WPS有Linux版本. 安装步骤: 1.安装依赖包 yum install libpng12 yum i ...
- codevs 5971 打击犯罪
5971 打击犯罪 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 某个地区有n(n<=1000)个犯罪团伙,当地警方按照他们 ...
- 鸟哥的私房菜:Linux磁盘与文件系统原理
1 硬盘物理组成 //原理 磁头负责读写 磁道(硬盘同半径的一圈) 磁柱(所有盘磁道叠加起来的柱) 扇区(2条半径将磁道分开的一个扇形区域,是磁盘的最小存储单位) ------ ...
- Java-----jar反编译修改重新打包
http://blog.csdn.net/hekewangzi/article/details/44676797 一.使用反编译工具JD-GUI(JD-GUI相关操作见Java-----反编译clas ...
- bzoj 1069
最开始想到的是枚举3个点,另一个点用卡壳的思想,但实际上可以只枚举两个点(对角线上的两个点),其余两个点用卡壳. /****************************************** ...
- bzoj 1563
对于很多决策单调性DP问题,我们很难(但不是不可以)证明其决策满足单调性,所以感觉很像时,可以打表看是否满足. 这道题的精度(?范围)很难搞,开始生怕溢出,看了hzwer的代码,才发现用long do ...
- ROS知识(14)----局部避障的动态窗口算法(DWA)及其调试的方法
Dynamic Window Approach(DWA)是重要的局部轨迹规划算法,ROS中使用了DWA算法获得了很好的局部路径规划的效果.具体的教程可参考官方的导航调试资料Navigation Tun ...
- HDU 4708 Rotation Lock Puzzle (简单题)
Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- SQL语句200条(转)
//重建数据库 101, create database testdatabase;use database testdatabase; 102, create table tt1(id int, n ...