decice.js的github地址javascript
device.js是一個能夠用來檢測設備的平臺、操做系統和方向的JavaScript庫。device.js 經過操做系統(好比 iOS,安卓,黑莓,Windows,Firefox OX),方向(橫屏或者豎屏),類型(平板或者移動設備),來爲設備添加 CSS Class
,而且它還提供了一些Javascript 函數用來判斷設備。
好比在PC端打開引入了device.js的 html 頁面時會在<html>標籤裏添加"desktop landscape
"的class。html
iOS: iPhone, iPod, iPadjava
Android: Phones & Tabletsandroid
Blackberry: Phones & Tabletsios
Windows: Phones & Tabletsgit
Firefox OS: Phones & Tabletsgithub
直接在html頁面的頭部引入便可使用:windows
<script type="text/javascript" src="device.js"></script>
**Device** **CSS Classes** 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 MeeGo meego Desktop desktop Television television
**Orientation** **CSS Classes** Landscape landscape Portrait portrait
**Device** **JavaScript Method** Mobile device.mobile() Tablet device.tablet() Desktop device.desktop() 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() MeeGo device.meego() Television device.television()
**Orientation** **JavaScript Method** Landscape device.landscape() Portrait device.portrait()
一般狀況下,咱們爲了使頁面在不一樣分辨率的設備上展現出不一樣的效果,會使用CSS3
的 @media
屬性來實現,但若是咱們想在 PC端和 mobile端展現兩個不一樣的頁面,使用device.js 就會方便不少,首先用它來檢測設備,而後再在不一樣的設備上打開不一樣的頁面。
假設有個項目,咱們想讓它在手機上打開的頁面爲 m.html,在電腦上打開的頁面爲 desk.html,這個時候咱們就能夠用device.js來實現,代碼以下:iphone
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>device.js的使用</title> <script type="text/javascript" src="device.js"></script> </head> <body> <script type="text/javascript"> var isMobile = device.mobile(), isTable = device.tablet(); if(isMobile || isTable){ window.open("m.html","_self"); //若是終端是手機或者平板,就打開m.html } else{ window.open("desk.html","_self"); //不然打開desk.html } </script> </body> </html>