首页 > 移动平台 > 详细

javascript判断设备类型-手机(mobile)、安卓(android)、电脑(pc)、其他(ipad/iPod/Windows)等

时间:2014-06-25 14:07:40      阅读:439      评论:0      收藏:0      [点我收藏+]

使用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; width: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)

 

javascript判断设备类型-手机(mobile)、安卓(android)、电脑(pc)、其他(ipad/iPod/Windows)等,布布扣,bubuko.com

javascript判断设备类型-手机(mobile)、安卓(android)、电脑(pc)、其他(ipad/iPod/Windows)等

原文:http://www.cnblogs.com/zhidong123/p/3806672.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!