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

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检测设备并实现不同设备展示不同网页
现在很多时候会用@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 ...

随机推荐

hdoj 2277 Change the ball【找规律】
Change the ball Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
windows Nginx基本使用方法
相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...
SuperSocket使用demo
using System;using System.Collections.Generic;using System.Linq;using System.Text;using SuperSocket. ...
win10亮度不能调节的解决方法
如果大家遇到Win10屏幕亮度调不了,该如何解决呢?以下是电脑百事网小编亲测比较有用的几种方法,希望能够帮助大家. 修改注册表解决Win10屏幕亮度无法调节 1.首先使用 Win+R 组合快捷键打开W ...
Delphi中WebBrowser拦截网页Alert对话框消息(转)
interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, O ...
[Flux] 1. Development Environment Setup
Install packages: { "name": "reactflux", "version": "1.0.0", ...
COMPACT 行记录格式
CREATE TABLE `mytest` ( `t1` varchar() DEFAULT NULL, `t2` varchar() DEFAULT NULL, `t3` ) DEFAULT NUL ...
[转]Flex 布局教程：语法篇
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
Java基础知识强化08：将字符串倒序输出（包括空格）的几种方法
1.最容易想到的估计就是利用String类的toCharArray(),再倒序输出数组的方法了: package himi.hebao05; public class TestDemo02 { pub ...
linux下杀死进程（kill）的N种方法【转】
转自 http://blog.csdn.net/andy572633/article/details/7211546 首先,用ps查看进程,方法如下: $ ps -ef ……smx 182 ...