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

青旅半醒 2022-05-21 08:00 150阅读 0赞

device.js cdn地址，打开下面地址，选择版本

[http://www.bootcdn.cn/device.js/][http_www.bootcdn.cn_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

![复制代码][copycode.gif]

<!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);

![复制代码][copycode.gif]

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

javascript方法如下。

<table style="border:1px solid #C0C0C0;color:rgb(0,0,0);font-family:verdana, 'ms song', '宋体', Arial, '微软雅黑', Helvetica, sans-serif;font-size:13px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <th style="border-color:#C0C0C0;border-collapse:collapse;">Device</th> 
   <th style="border-color:#C0C0C0;border-collapse:collapse;">JavaScript Method</th> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Mobile</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.mobile()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Tablet</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.tablet()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">iOS</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.ios()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">iPad</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.ipad()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">iPhone</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.iphone()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">iPod</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.ipod()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Android</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.android()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Android Phone</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.androidPhone()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Android Tablet</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.androidTablet()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">BlackBerry</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.blackberry()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">BlackBerry Phone</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.blackberryPhone()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">BlackBerry Tablet</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.blackberryTablet()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Windows</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.windows()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Windows Phone</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.windowsPhone()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Windows Tablet</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.windowsTablet()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Firefox OS</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.fxos()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Firefox OS Phone</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.fxosPhone()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">Firefox OS Tablet</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.fxosTablet()</td> 
  </tr> 
  <tr> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">MeeGo</td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;">device.meego()</td> 
  </tr> 
 </tbody> 
</table>

比如可以用如下代码来检测设备是否为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">');
        }

[http_www.bootcdn.cn_device.js]: http://www.bootcdn.cn/device.js/
[copycode.gif]: /images/20220521/2787a907dadf43bfb8873f1789a87b87.png