使用device.js检测设备并实现不同设备展示不同网页
生活随笔
收集整理的這篇文章主要介紹了
使用device.js检测设备并实现不同设备展示不同网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
現在很多時候會用@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
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>responsive demo</title><script src="device.js"></script> </head><body style="margin: auto; position: absolute; width:100%; height: 100%"><script>var isMobile = device.mobile(),isTable = device.tablet();if(isMobile || isTable){window.open("m.html","_self");}else{window.open("pc.html","_self");} </script> </body> </html> 其中device.js代碼如下(function() {var previousDevice, _addClass, _doc_element, _find, _handleOrientation, _hasClass, _orientation_event, _removeClass, _supports_orientation, _user_agent;previousDevice = window.device;window.device = {};_doc_element = window.document.documentElement;_user_agent = window.navigator.userAgent.toLowerCase();device.ios = function() {return device.iphone() || device.ipod() || device.ipad();};device.iphone = function() {return _find('iphone');};device.ipod = function() {return _find('ipod');};device.ipad = function() {return _find('ipad');};device.android = function() {return _find('android');};device.androidPhone = function() {return device.android() && _find('mobile');};device.androidTablet = function() {return device.android() && !_find('mobile');};device.blackberry = function() {return _find('blackberry') || _find('bb10') || _find('rim');};device.blackberryPhone = function() {return device.blackberry() && !_find('tablet');};device.blackberryTablet = function() {return device.blackberry() && _find('tablet');};device.windows = function() {return _find('windows');};device.windowsPhone = function() {return device.windows() && _find('phone');};device.windowsTablet = function() {return device.windows() && _find('touch');};device.fxos = function() {return (_find('(mobile;') || _find('(tablet;')) && _find('; rv:');};device.fxosPhone = function() {return device.fxos() && _find('mobile');};device.fxosTablet = function() {return device.fxos() && _find('tablet');};device.meego = function() {return _find('meego');};device.mobile = function() {return device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone() || device.meego();};device.tablet = function() {return device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() || device.fxosTablet();};device.portrait = function() {return Math.abs(window.orientation) !== 90;};device.landscape = function() {return Math.abs(window.orientation) === 90;};device.noConflict = function() {window.device = previousDevice;return this;};_find = function(needle) {return _user_agent.indexOf(needle) !== -1;};_hasClass = function(class_name) {var regex;regex = new RegExp(class_name, 'i');return _doc_element.className.match(regex);};_addClass = function(class_name) {if (!_hasClass(class_name)) {return _doc_element.className += " " + class_name;}};_removeClass = function(class_name) {if (_hasClass(class_name)) {return _doc_element.className = _doc_element.className.replace(class_name, "");}};if (device.ios()) {if (device.ipad()) {_addClass("ios ipad tablet");} else if (device.iphone()) {_addClass("ios iphone mobile");} else if (device.ipod()) {_addClass("ios ipod mobile");}} else if (device.android()) {if (device.androidTablet()) {_addClass("android tablet");} else {_addClass("android mobile");}} else if (device.blackberry()) {if (device.blackberryTablet()) {_addClass("blackberry tablet");} else {_addClass("blackberry mobile");}} else if (device.windows()) {if (device.windowsTablet()) {_addClass("windows tablet");} else if (device.windowsPhone()) {_addClass("windows mobile");} else {_addClass("desktop");}} else if (device.fxos()) {if (device.fxosTablet()) {_addClass("fxos tablet");} else {_addClass("fxos mobile");}} else if (device.meego()) {_addClass("meego mobile");} else {_addClass("desktop");}_handleOrientation = function() {if (device.landscape()) {_removeClass("portrait");return _addClass("landscape");} else {_removeClass("landscape");return _addClass("portrait");}};_supports_orientation = "onorientationchange" in window;_orientation_event = _supports_orientation ? "orientationchange" : "resize";if (window.addEventListener) {window.addEventListener(_orientation_event, _handleOrientation, false);} else if (window.attachEvent) {window.attachEvent(_orientation_event, _handleOrientation);} else {window[_orientation_event] = _handleOrientation;}_handleOrientation();}).call(this);當然，也可以用device.js來逐個檢測設備。
javascript方法如下。
| 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(),isIPad = device.ipad();var isIOS = isIPhone || isIPad;if(isIOS){alert("is this iOS?"+isIOS);}或者可以用來控制當為mobile或者tablet的時候加載m.css, PC的時候加載pc.css
?
if(isMobile | isTable){document.write( ' <link rel="stylesheet" href="m.css">');}else{document.write('<link rel="stylesheet" href="pc.css">');}?
轉載于:https://www.cnblogs.com/djdliu/p/5799134.html
總結
以上是生活随笔為你收集整理的使用device.js检测设备并实现不同设备展示不同网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ionic一些常见问题及方法
- 下一篇： PageRank算法--从原理到实现