Device.js——检测设备平台、操作系统的Javascript 库
http://segmentfault.com/a/1190000000373735
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
https://github.com/matthewhudson/device.js
Device.js——检测设备平台、操作系统的Javascript 库的更多相关文章
- 使用device.js检测设备并实现不同设备展示不同网页
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面.这个时候可以借助device.js来检测设备,然后 ...
- 检测设备平台,操作系统,方向 Javascript 库:Device.js
Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <html> 标签添加一些设备平台,操作系统,方向相关的 CSS class,这样就 ...
- Quo JS多种触摸手势轻量级JavaScript库
http://www.uedsc.com/quo-js.html http://quojs.tapquo.com/
- (转)12款开源JavaScript库
JavaScipt几乎是所有前端开发人员必会的编程语言,并且,随着各种移动APP的串红,JavaScript还可以用来开发移动应用.除此以外,为了丰富前端/移动开发,有不少开发者推出了各种基于Java ...
- 开发者必备的 12 个 JavaScript 库
现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计.为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node. ...
- 开发者必备的12个JavaScript库
现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计.为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node. ...
- 20个简化开发任务的 JavaScript库
所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...
- 【转】20个简化开发任务的 JavaScript库
原文出处: codegeekz 译文出处: oschina 所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 J ...
- Device.js – 快速检测平台、操作系统和方向信息
在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...
随机推荐
- arm 及ndk编译
首页 » Android android的armeabi跟armeabi-v7a 网友分享于:2014-03-16 浏览:867次 android的armeabi和armeabi-v7 ...
- zoj 2100 Seeding
Seeding Time Limit: 2 Seconds Memory Limit: 65536 KB It is spring time and farmers have to plan ...
- [iOS] iOS系统中各种设置项的url链接
在代码中调用如下代码:NSURL*url=[NSURL URLWithString:@"prefs:root=WIFI"];[[UIApplication sharedApplic ...
- (二)Eclipse 快捷键
编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等)Ctrl+Shift+F 格式化当前代码Ctrl+Shift+M 添加类的i ...
- usb转串口如何配置?
概述 USB转串口输出,在kernel启动阶段加载相应的usb转串口芯片驱动,加载成功后,可通过usb转串口与pc机端交互. 步骤 1. 在kernel配置中选中usb转串口驱动: 2. 传给内核 ...
- 跨服务器修改数据 分类: SQL Server 2014-08-21 21:24 316人阅读 评论(0) 收藏
说明: 两个服务器: 192.168.0.22 A 192.168.0.3 B 数据库备份在A上 数据库在B上 在A上写: exec sp_addlinkedserver 'ITSV ...
- StopWatch
附件 http://download.csdn.net/detail/teststudio/6575241 主窗体UNIT unit MainForm; interface uses Windows, ...
- 教你搞定Android自定义View
Android App开发过程中,很多时候会遇到系统框架中提供的控件无法满足我们产品的设计需求,那么这时候我们可以选择先Google下有没有比较成熟的开源项目可以让我们用,当然现在Github上面的项 ...
- Qtcreator中经常使用快捷键总结
Qtcreator中经常使用快捷键总结 F1 查看帮助 F2 跳转到函数定义(和Ctrl+鼠标左键一样的效果) Shift+F2 声明和定义之间切换 F4 ...
- android 05 桢布局:FrameLayout 网格布据 GridLayout
xml文件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android: ...