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 ...
随机推荐
- 通过代码来执行testng.xml
大多数时候,我们都是通过Eclipse IDE上的操作命令来执行testng 框架下的case 运行.那如果我们不想通过这种方式,而是想通过代码调用来实现执行该怎么办?下面是我搜集的两种方式供大家参考 ...
- selenium.common.exceptions.TimeoutException: Message: Screenshot: available via screen
在使用selenium+phantomjs的时候在Windows平台下能够正常工作,在Linux下却不能,并得到错误信息: selenium.common.exceptions.TimeoutExce ...
- Parallel.Foreach的并发问题解决方法-比如爬虫WebClient
场景五:线程局部变量 Parallel.ForEach 提供了一个线程局部变量的重载,定义如下: public static ParallelLoopResult ForEach<TSource ...
- UVaLive4043 UVa1411 Ants 巨人与鬼
题意:给出平面上n个白点n个黑点,要求两两配对,且配对所连线段没有交点. 法一:暴力 随机一个初始方案,枚举任意两条线段如果有交点就改一下. 效率其实挺好的. 法二:二分图最佳完美匹配 显然没有交点的 ...
- 屏幕录制:SCR Screen Recorder Pro v0.14.3汉化破解版
应用概览 <ignore_js_op> 软件名称:屏幕录制:SCR Screen Recorder Pro 软件版本:v0.14.3汉化破解版软件语言:中文软件大小:3.5M软件包名:co ...
- java websocket工具
https://github.com/dzharvis/servlet-websocket-server http://redstarofsleep.iteye.com/blog/1488639 ht ...
- [Flux] 2. Overview and Dispatchers
Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact l ...
- Qss
*{ font-size:13px; color:white; font-family:"宋体"; } CallWidget QLineEdit#telEdt { font-siz ...
- [转] 一个资深iOS开发者对于React Native的看法
当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...
- [转] Python特殊语法:filter、map、reduce、lambda
Python内置了一些非常有趣但非常有用的函数,充分体现了Python的语言魅力! filter(function, sequence):对sequence中的item依次执行function(ite ...