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

时间: 2024-10-14 11:33:54

Device.js——检测设备平台、操作系统的Javascript 库的相关文章

使用device.js检测设备并实现不同设备展示不同网页

现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面.这个时候可以借助device.js来检测设备,然后打开不同的页面(device.js 是一个可以用来检测设备,操作系统和方向的js库).当然这种做法需要一次跳转. 假设有个m.html想用于mobile端展示,pc.html想用于pc端展示.这个时候可以用index.html作为入口,在<head>内引入device.js来检测设备,然后用js来

Quo JS多种触摸手势轻量级JavaScript库【唯美巷转载】

Quo JS是一个轻量级模块化.面向对象的JavaScript库,定义了多种触摸手势,可以用于移动Web开发中简化HTML文件遍历.事件处理及Ajax交互等,让开发者轻松编写出高效的跨浏览器代码. Quo JS介绍 Quo JS旨在简化你的移动开发项目的代码量,针对当前的移动设备优化代码运行,支持单点.多点.滑动.按住等多种手势的操作. 专为移动 为了改变你的目标,编写JavaScript的方式:一个好的API库5-6k gzip压缩过的所以你可以集中精力处理最基本的东西做苦力的工作.开源的MI

开发者必备的 12 个 JavaScript 库

现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计.为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js 扩展等等.有了这些工具,开发者们就能专注于创意设计了,而不用为某个功能而花费太多精力.这里我们介绍的是 12 个开发者们必备的 JavaScript 库,都是一些很基础功能很强大的库.有了这些库,开发者们可以节省很多时间,大大提高开发的效率,所以大家赶紧收藏起来吧:) 1) Headroom.

开发者必备的12个JavaScript库

现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计.为了方便大家发挥自己的创意,就产生了很多 JS 框架,Node.js 扩展等等.有了这些工具,开发者们就能专注于创意设计了,而不用为某个功能而花费太多精力.这里我们介绍的是 12 个开发者们必备的 JavaScript 库,都是一些很基础功能很强大的库.有了这些库,开发者们可以节省很多时间,大大提高开发的效率,所以大家赶紧收藏起来吧:) 1) Headroom.

推荐15款制作 SVG 动画的 JavaScript 库

在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些JS库帮助设计师和开发人员可以轻松地为他们的项目和Web应用程序创建创新和逼真的图形. 1.Textures.js Textures.js易于改进的数据可视化添加SVG图形.它包括一个巨大的各种纹理,包括直线,圆,路径,甚至自定义模式. 在线预览 2.Circulus.svg Circulus.svg

Feature.js-轻量级浏览器特性检测JavaScript库插件

简要教程 Feature.js是一款轻量级的浏览器特性检测JavaScript库插件.该插件运行速度快,使用简单,文件只有1kb大小.通过Feature.js你可以检测客户浏览器是否支持某些特性,并针对这些特性编写代码. Feature.js会自动在页面初始化时进行加载,但是它不会自动进行特性检测,直到你在代码中调用它时才会进行指定特性的检测. 通过Feature.js你可以对浏览器进行特性检测,例如检测浏览器是否支持CSS 3D transforms,为支持该特性的浏览器编写代码来操纵元素进行

JS函数式编程 3.1 Javascript的函数式库

?? Functional Programming in Javascript 主目录第三章 建立函数式编程环境 Javascript的函数式库 据说所有的函数式程序员都会写自己的函数库,函数式Javascript程序员也不例外. 随着如今开源代码分享平台如GitHab.Bower和NPM的涌现,对这些函数库进行分享.变得及补充变得越来越容易. 现在已经有很多Javascript的函数式变成苦,从小巧的工具集到庞大的模块库都有. 每一个库都宣扬着自己的函数式编程风格.从一本正经的数学风格到灵活松

Numeral.js – 格式化和操作数字的 JavaScript 库

Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文链接:Numer

Baffle.js – 用于实现文本模糊效果的 JavaScript 库

Baffle.js 是一个 JavaScript 库,设计用来模糊和揭开DOM元素的文本. 这些元素可以是一个 CSS 选择器的形式.一个节点列表或者一个单节点. 你也可以传递一个选择对象给插件. 在线演示      立即下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插