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

来源：互联网发布：淘宝店铺名能改吗编辑：程序博客网时间：2024/06/05 22:31

现在很多时候会用@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方法如下。

DeviceJavaScript MethodMobiledevice.mobile()Tabletdevice.tablet()iOSdevice.ios()iPaddevice.ipad()iPhonedevice.iphone()iPoddevice.ipod()Androiddevice.android()Android Phonedevice.androidPhone()Android Tabletdevice.androidTablet()BlackBerrydevice.blackberry()BlackBerry Phonedevice.blackberryPhone()BlackBerry Tabletdevice.blackberryTablet()Windowsdevice.windows()Windows Phonedevice.windowsPhone()Windows Tabletdevice.windowsTablet()Firefox OSdevice.fxos()Firefox OS Phonedevice.fxosPhone()Firefox OS Tabletdevice.fxosTablet()MeeGodevice.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://github.com/matthewhudson/device.js

0 0