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 ...
随机推荐
-
从程序员到CTO的Java技术路线图(我爱分享)
在技术方面无论我们怎么学习,总感觉需要提升自已不知道自己处于什么水平了.但如果有清晰的指示图供参考还是非常不错的,这样我们清楚的知道我们大概处于那个阶段和水平. Java程序员 高级特性 反射.泛型. ...
-
servlet request getHeader(“x-forwarded-for”) 获取真实IP
request方法客户端IP: request.getRemoteAddr() 输出:192.168.0.106 客户端主机名:request.getRemoteHost()输出:abc reques ...
-
iOS10 app连接不上网络的问题
http://jingyan.baidu.com/article/29697b917f2069ab20de3c33.html
-
Launchpad添加openPGP keys
转自: https://help.ubuntu.com/community/GnuPrivacyGuardHowto mac下: http://notes.jerzygangi.com/the-bes ...
-
VC与JavaScript交互(二) --- 调用JS函数
这一章,我们来动手实践VC调用JS函数. 我们动手写一个HTML,其中包含这样一段JS代码: //[html] <script type="text/javascript"& ...
-
BZOJ 3123 森林(函数式线段树)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3123 题意: 思路:总的来说,查询区间第K小利用函数式线段树的减法操作.对于两棵树的合并 ...
-
Android 6.0 Changes
原文链接:http://developer.android.com/about/versions/marshmallow/android-6.0-changes.html 伴随着新特性和功能,Andr ...
- hadoop输出统计
-
day20<;IO流>;
IO流(IO流概述及其分类) IO流(FileInputStream) IO流(read()方法返回值为什么是int) IO流(FileOutputStream) IO流(FileOutputStre ...
-
SpringCloud学习笔记(2)——Ribbon
参考SpringCloud官网第16.17章 16. Client Side Load Balancer: Ribbon Ribbon是一个客户端的负载均衡器,它提供对大量的HTTP和TCP客户端的访 ...