课程频道导航
课程分类导航
当前位置：首页 > 操作系统 > Windows

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

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

html代码：

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

    </span>
            <span></</span>
            <span>script</span>
            <span>></span>
            <span></</span>
            <span>body</span>
            <span>></span>
            <span></</span>
            <span>html</span>
            <span>></span>

引入device.js

(<span>function</span><span>() {
  </span><span>var</span><span> previousDevice, _addClass, _doc_element, _find, _handleOrientation, _hasClass, _orientation_event, _removeClass, _supports_orientation, _user_agent;

  previousDevice </span>=<span> window.device;

  window.device </span>=<span> {};

  _doc_element </span>=<span> window.document.documentElement;

  _user_agent </span>=<span> window.navigator.userAgent.toLowerCase();

  device.ios </span>= <span>function</span><span>() {
    </span><span>return</span> device.iphone() || device.ipod() ||<span> device.ipad();
  };

  device.iphone </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘iphone‘<span>);
  };

  device.ipod </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘ipod‘<span>);
  };

  device.ipad </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘ipad‘<span>);
  };

  device.android </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘android‘<span>);
  };

  device.androidPhone </span>= <span>function</span><span>() {
    </span><span>return</span> device.android() && _find(‘mobile‘<span>);
  };

  device.androidTablet </span>= <span>function</span><span>() {
    </span><span>return</span> device.android() && !_find(‘mobile‘<span>);
  };

  device.blackberry </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘blackberry‘) || _find(‘bb10‘) || _find(‘rim‘<span>);
  };

  device.blackberryPhone </span>= <span>function</span><span>() {
    </span><span>return</span> device.blackberry() && !_find(‘tablet‘<span>);
  };

  device.blackberryTablet </span>= <span>function</span><span>() {
    </span><span>return</span> device.blackberry() && _find(‘tablet‘<span>);
  };

  device.windows </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘windows‘<span>);
  };

  device.windowsPhone </span>= <span>function</span><span>() {
    </span><span>return</span> device.windows() && _find(‘phone‘<span>);
  };

  device.windowsTablet </span>= <span>function</span><span>() {
    </span><span>return</span> device.windows() && _find(‘touch‘<span>);
  };

  device.fxos </span>= <span>function</span><span>() {
    </span><span>return</span> (_find(‘(mobile;‘) || _find(‘(tablet;‘)) && _find(‘; rv:‘<span>);
  };

  device.fxosPhone </span>= <span>function</span><span>() {
    </span><span>return</span> device.fxos() && _find(‘mobile‘<span>);
  };

  device.fxosTablet </span>= <span>function</span><span>() {
    </span><span>return</span> device.fxos() && _find(‘tablet‘<span>);
  };

  device.meego </span>= <span>function</span><span>() {
    </span><span>return</span> _find(‘meego‘<span>);
  };

  device.mobile </span>= <span>function</span><span>() {
    </span><span>return</span> device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone() ||<span> device.meego();
  };

  device.tablet </span>= <span>function</span><span>() {
    </span><span>return</span> device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() ||<span> device.fxosTablet();
  };

  device.portrait </span>= <span>function</span><span>() {
    </span><span>return</span> Math.abs(window.orientation) !== 90<span>;
  };

  device.landscape </span>= <span>function</span><span>() {
    </span><span>return</span> Math.abs(window.orientation) === 90<span>;
  };

  device.noConflict </span>= <span>function</span><span>() {
    window.device </span>=<span> previousDevice;
    </span><span>return</span><span>this</span><span>;
  };

  _find </span>= <span>function</span><span>(needle) {
    </span><span>return</span> _user_agent.indexOf(needle) !== -1<span>;
  };

  _hasClass </span>= <span>function</span><span>(class_name) {
    </span><span>var</span><span> regex;
    regex </span>= <span>new</span> RegExp(class_name, ‘i‘<span>);
    </span><span>return</span><span> _doc_element.className.match(regex);
  };

  _addClass </span>= <span>function</span><span>(class_name) {
    </span><span>if</span> (!<span>_hasClass(class_name)) {
      </span><span>return</span> _doc_element.className += " " +<span> class_name;
    }
  };

  _removeClass </span>= <span>function</span><span>(class_name) {
    </span><span>if</span><span> (_hasClass(class_name)) {
      </span><span>return</span> _doc_element.className = _doc_element.className.replace(class_name, ""<span>);
    }
  };

  </span><span>if</span><span> (device.ios()) {
    </span><span>if</span><span> (device.ipad()) {
      _addClass(</span>"ios ipad tablet"<span>);
    } </span><span>else</span><span>if</span><span> (device.iphone()) {
      _addClass(</span>"ios iphone mobile"<span>);
    } </span><span>else</span><span>if</span><span> (device.ipod()) {
      _addClass(</span>"ios ipod mobile"<span>);
    }
  } </span><span>else</span><span>if</span><span> (device.android()) {
    </span><span>if</span><span> (device.androidTablet()) {
      _addClass(</span>"android tablet"<span>);
    } </span><span>else</span><span> {
      _addClass(</span>"android mobile"<span>);
    }
  } </span><span>else</span><span>if</span><span> (device.blackberry()) {
    </span><span>if</span><span> (device.blackberryTablet()) {
      _addClass(</span>"blackberry tablet"<span>);
    } </span><span>else</span><span> {
      _addClass(</span>"blackberry mobile"<span>);
    }
  } </span><span>else</span><span>if</span><span> (device.windows()) {
    </span><span>if</span><span> (device.windowsTablet()) {
      _addClass(</span>"windows tablet"<span>);
    } </span><span>else</span><span>if</span><span> (device.windowsPhone()) {
      _addClass(</span>"windows mobile"<span>);
    } </span><span>else</span><span> {
      _addClass(</span>"desktop"<span>);
    }
  } </span><span>else</span><span>if</span><span> (device.fxos()) {
    </span><span>if</span><span> (device.fxosTablet()) {
      _addClass(</span>"fxos tablet"<span>);
    } </span><span>else</span><span> {
      _addClass(</span>"fxos mobile"<span>);
    }
  } </span><span>else</span><span>if</span><span> (device.meego()) {
    _addClass(</span>"meego mobile"<span>);
  } </span><span>else</span><span> {
    _addClass(</span>"desktop"<span>);
  }

  _handleOrientation </span>= <span>function</span><span>() {
    </span><span>if</span><span> (device.landscape()) {
      _removeClass(</span>"portrait"<span>);
      </span><span>return</span> _addClass("landscape"<span>);
    } </span><span>else</span><span> {
      _removeClass(</span>"landscape"<span>);
      </span><span>return</span> _addClass("portrait"<span>);
    }
  };

  _supports_orientation </span>= "onorientationchange" <span>in</span><span> window;

  _orientation_event </span>= _supports_orientation ? "orientationchange" : "resize"<span>;

  </span><span>if</span><span> (window.addEventListener) {
    window.addEventListener(_orientation_event, _handleOrientation, </span><span>false</span><span>);
  } </span><span>else</span><span>if</span><span> (window.attachEvent) {
    window.attachEvent(_orientation_event, _handleOrientation);
  } </span><span>else</span><span> {
    window[_orientation_event] </span>=<span> _handleOrientation;
  }

  _handleOrientation();

}).call(</span><span>this</span>);

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)

 

原文：http://www.cnblogs.com/zhidong123/p/3806672.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！

相关教程推荐

其他课程推荐