Device.js检测设备平台、操作系统的JavaScript库

　　Device.js是一个可以让你检测设备的平台，操作系统和方向的JavaScript库，它会自动在<html>标签添加一些设备，操作系统，方向相关的CSS class，这样就能让你针对不同设备撰写不同的CSS,并还提供一些JavaScript函数来判断设备类型。

　　

　　现在很多时候会用@media来控制页面在不同分辨率的设备上展示不同效果，但是有些时候想在pc上展示一个做好的页面，在mobile展示另一个页面。这个时候可以借助device.js来检测设备，然后打开不同的页面（Device.js是一个可以用来检测设备，操作系统和方向的js库）。当然这种操作需要一次跳转。

　　假设有个m.html想用于mobile展示，pc.html想用于pc端展示。这个时候可以用index.html作为入口，在<head>内引入Device.js来检测设备，然后用js来实现跳转。

　　当设备为Mobile和tablet的时候展示m.html

　　否则展示pc.html

　　

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="utf-8">
  5   <title>responsive demo</title>
  6   <script src="device.js"></script>
  7 </head>
  8 
  9 <body style="margin: auto; position: absolute; width:100%; height: 100%">
 10 
 11 <script>
 12  var isMobile = device.mobile(),
 13             isTable = device.tablet();
 14 
 15     if(isMobile || isTable){
 16         window.open("m.html","_self");
 17     }
 18     else{
 19          window.open("pc.html","_self");
 20     }
 21 </script>
 22 </body>
 23 </html>
 24 其中device.js代码如下
 25 
 26 (function() {
 27   var previousDevice, _addClass, _doc_element, _find, _handleOrientation, _hasClass, _orientation_event, _removeClass, _supports_orientation, _user_agent;
 28 
 29   previousDevice = window.device;
 30 
 31   window.device = {};
 32 
 33   _doc_element = window.document.documentElement;
 34 
 35   _user_agent = window.navigator.userAgent.toLowerCase();
 36 
 37   device.ios = function() {
 38     return device.iphone() || device.ipod() || device.ipad();
 39   };
 40 
 41   device.iphone = function() {
 42     return _find('iphone');
 43   };
 44 
 45   device.ipod = function() {
 46     return _find('ipod');
 47   };
 48 
 49   device.ipad = function() {
 50     return _find('ipad');
 51   };
 52 
 53   device.android = function() {
 54     return _find('android');
 55   };
 56 
 57   device.androidPhone = function() {
 58     return device.android() && _find('mobile');
 59   };
 60 
 61   device.androidTablet = function() {
 62     return device.android() && !_find('mobile');
 63   };
 64 
 65   device.blackberry = function() {
 66     return _find('blackberry') || _find('bb10') || _find('rim');
 67   };
 68 
 69   device.blackberryPhone = function() {
 70     return device.blackberry() && !_find('tablet');
 71   };
 72 
 73   device.blackberryTablet = function() {
 74     return device.blackberry() && _find('tablet');
 75   };
 76 
 77   device.windows = function() {
 78     return _find('windows');
 79   };
 80 
 81   device.windowsPhone = function() {
 82     return device.windows() && _find('phone');
 83   };
 84 
 85   device.windowsTablet = function() {
 86     return device.windows() && _find('touch');
 87   };
 88 
 89   device.fxos = function() {
 90     return (_find('(mobile;') || _find('(tablet;')) && _find('; rv:');
 91   };
 92 
 93   device.fxosPhone = function() {
 94     return device.fxos() && _find('mobile');
 95   };
 96 
 97   device.fxosTablet = function() {
 98     return device.fxos() && _find('tablet');
 99   };
100 
101   device.meego = function() {
102     return _find('meego');
103   };
104 
105   device.mobile = function() {
106     return device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone() || device.meego();
107   };
108 
109   device.tablet = function() {
110     return device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() || device.fxosTablet();
111   };
112 
113   device.portrait = function() {
114     return Math.abs(window.orientation) !== 90;
115   };
116 
117   device.landscape = function() {
118     return Math.abs(window.orientation) === 90;
119   };
120 
121   device.noConflict = function() {
122     window.device = previousDevice;
123     return this;
124   };
125 
126   _find = function(needle) {
127     return _user_agent.indexOf(needle) !== -1;
128   };
129 
130   _hasClass = function(class_name) {
131     var regex;
132     regex = new RegExp(class_name, 'i');
133     return _doc_element.className.match(regex);
134   };
135 
136   _addClass = function(class_name) {
137     if (!_hasClass(class_name)) {
138       return _doc_element.className += " " + class_name;
139     }
140   };
141 
142   _removeClass = function(class_name) {
143     if (_hasClass(class_name)) {
144       return _doc_element.className = _doc_element.className.replace(class_name, "");
145     }
146   };
147 
148   if (device.ios()) {
149     if (device.ipad()) {
150       _addClass("ios ipad tablet");
151     } else if (device.iphone()) {
152       _addClass("ios iphone mobile");
153     } else if (device.ipod()) {
154       _addClass("ios ipod mobile");
155     }
156   } else if (device.android()) {
157     if (device.androidTablet()) {
158       _addClass("android tablet");
159     } else {
160       _addClass("android mobile");
161     }
162   } else if (device.blackberry()) {
163     if (device.blackberryTablet()) {
164       _addClass("blackberry tablet");
165     } else {
166       _addClass("blackberry mobile");
167     }
168   } else if (device.windows()) {
169     if (device.windowsTablet()) {
170       _addClass("windows tablet");
171     } else if (device.windowsPhone()) {
172       _addClass("windows mobile");
173     } else {
174       _addClass("desktop");
175     }
176   } else if (device.fxos()) {
177     if (device.fxosTablet()) {
178       _addClass("fxos tablet");
179     } else {
180       _addClass("fxos mobile");
181     }
182   } else if (device.meego()) {
183     _addClass("meego mobile");
184   } else {
185     _addClass("desktop");
186   }
187 
188   _handleOrientation = function() {
189     if (device.landscape()) {
190       _removeClass("portrait");
191       return _addClass("landscape");
192     } else {
193       _removeClass("landscape");
194       return _addClass("portrait");
195     }
196   };
197 
198   _supports_orientation = "onorientationchange" in window;
199 
200   _orientation_event = _supports_orientation ? "orientationchange" : "resize";
201 
202   if (window.addEventListener) {
203     window.addEventListener(_orientation_event, _handleOrientation, false);
204   } else if (window.attachEvent) {
205     window.attachEvent(_orientation_event, _handleOrientation);
206   } else {
207     window[_orientation_event] = _handleOrientation;
208   }
209 
210   _handleOrientation();
211 
212 }).call(this);

 

 

当然，也可以用device.js来逐个检测设备。

JavaScript方法如下：

DeviceJavaScript 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()
MeeGo device.meego()

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

比如可以用如下的代码来检测设备是否为ios设备

var isIphone = device.iphone();
var isIpad = device.ipad();
var isIOS = isIphone || isIpad;
if(isIOS){
   alert("is this IOS?" + isIOS);      
}

或者可以用来控制为mobile或者tablet的时候加载m.css，pc的时候加载pc.css

if(isMobile || isTablet){
    document.write('<link rel="stylesheet" href="m.css">');  
}else{
    document.write('<link rel="stylesheet" href="pc.css">');      
}

 

posted @ 2016-12-19 16:45  ComiZh  阅读(1701)  评论(0)  编辑  收藏  举报