在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作。Device.js 是一个很小的JavaScript库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScript 代码。
Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在标签添加一些设备平台,操作系统,方向相关的 CSS class,这样就能让你针对不同设备撰写不同的 CSS,并且还提供一些 Javascript 函数来判断设备。

device.js
  Device.js 通过操作系统(比如 iOS,安卓,黑莓,Windows,Firefox OX),方向(横屏或者竖屏),类型(平板或者移动设备),如下面在 iPhone 上的浏览的时候在添加的 CSS Class:

device-js-css-class

支持的设备

  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets

如何使用

Device.js 使用非常简单,只需要在页面的 head 载入相关的 JS 库即可:

1
<script src="device.js"></script>

生成的 CSS Class:

Device.js

相关的 Javascript 函数

相关的 Javascript 函数

实例:判断移动设备最佳方法 并实现跳转至手机版网页

STEP 1: 引入 JS 文件

1
<script src=”device.min.js”></script>

STEP 2: 加入判断代码

1
2
3
4
5
<script type=”text/javascript”>
if(device.mobile()){
window.location = “shouji.html”; //可以换成http地址
}
</script>

&emsp;&emsp;Device.js 方法有很多,若你想实现对某个设备的判断,则要使用device.mobile()。
以上方法判断手机端很实用的,尤其是电脑版网页和手机版网页分别用不同的网站域名时,使用该方法可以免去用户记2个域名烦恼!

&nbsp;

查看演示

点击下载