zoukankan      html  css  js  c++  java
  • javascript判断设备类型-手机(mobile)、安卓(android)、电脑(pc)、其他(ipad/iPod/Windows)等

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

    html代码:

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <script src="device.js"></script>
    </head>
    
    <body style="margin: auto; position: absolute; 100%; height: 100%">
      <script>  
         var isMobile = device.mobile(),  
         isIos = device.ios(),
         isAndroid = device.android();
          if(isMobile){
            alert("手机");
          }else{
            alert("pc");
          }
          if(isIos){
            alert("ios");
          }
          if(isAndroid){
            alert('安卓');
          }
    
        </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);

    api列表:

    Device JavaScript 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()




    实例下载:设备检测demo(http://files.cnblogs.com/zhidong123/devide-test.rar)

    复杂的事情简单化,简单的事情重复做。
  • 相关阅读:
    静态内部类与非静态内部类之间的访问
    面向对象蚂蚁爬杆的问题
    关于Clone 的方法使用
    关于谁来参加会议这个题目的卫条件
    String类的基本用法与注意点,StringBuffer类的用法
    Smarty模板Windows下写代码 放到CentOS6.5无法正确解析
    [转]Linux(centOS6.5)下SVN的安装、配置及开机启动
    [转]Centos6.5使用yum安装mysql—配置MySQL允许远程登录
    [转]-bash: wget: command not found的两种解决方法
    [转]VMware 出现下述错误: Application failure. hr=0x80040101:Failed to initialize virtual machine.
  • 原文地址:https://www.cnblogs.com/zhidong123/p/3806672.html
Copyright © 2011-2022 走看看