使用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)等的更多相关文章

  1. JavaScript判断当前手机是Android还是iOS系统

    $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(' ...

  2. asp.net或javascript判断是否手机访问

    /// <summary> /// 判断手机用户UserAgent /// </summary> /// <returns></returns> pri ...

  3. 【函数封装】javascript判断移动端操作系统为android 或 ios 或 iphoneX

    function isPhone(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.index ...

  4. 启明星手机版安卓android会议室预定系统 V1.0发布

    启明星手机版会议室预定系统 V1.0发布 在手机里输入 http://www.dotnetcms.org/e4.apk 或者扫描二维码下载 用户打开系统,可以实时查看所有会议室状态 点击会议室名称,可 ...

  5. [JavaScript] 判断设备类型,加载相应css

    $(document).ready(function () { var browser = { versions: function () { var u = navigator.userAgent, ...

  6. 用JavaScript判断网站是在手机端还是在PC端打开的方法

    我们可以在网站的首页加上一段JavaScript代码对用户的浏览器进行判断,从而显示不同的网址,代码如下: <script type="text/javascript"> ...

  7. PHP和javascript判断用户使用的是手机还是电脑

    PHP判断手机还是电脑 <?php $is_mobile = (is_mobile() == true) ? "手机" : "电脑"; echo '< ...

  8. Andy - 又一款速度流畅的免费安卓 Android 模拟器 (支持手机无线控制电脑模拟器)

    随着 Genymotion.BlueStacks 等电脑上的 Android 模拟器流行起来之后,似乎很多人都发现在电脑上运行使用安卓APP软件.畅玩手机游戏确实很有乐趣. 今天我们又发现了一款全新免 ...

  9. JavaScript判断是否是手机mobile登录

    在页面代码中加入以下js,即可利用JavaScript判断是否是手机mobile登录! <script type="text/javascript" src="${ ...

随机推荐

  1. 武汉Uber优步司机奖励政策(2月1日~2月7日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. express4.x 路由中间件

    路由中间件必须通过app挂载到对应的路由上,如: var express = require('express'); var router = express.Router(); var app = ...

  3. 解决jquery animate({scrollTop$pos},500)与$(window).scroll方法冲突的问题

    当点击节点时 先移除$(window).on("scroll")监听事件 在animate动画结束之后再添加上 $('#J_tab li').on('click', functio ...

  4. (int),Convert.ToInt32(),Int32.Parse(),Int32.TryParsed()的用法总结

    1 (int) 强制转型为整型. 当将long,float,double,decimal等类型转换成int类型时可采用这种方式. double dblNum = 20; int intDblNum = ...

  5. Jsp的内置标签和jstl标签

    1.内置标签(动作标签) 内置标签不需要再jsp页面导入标签 1).forward:请求的转发,格式如下 <%-- 作用与这个相同 <%request.getRequestDispatch ...

  6. At-rule | CSS @ 规则

    译自:MDN(Mozilla开发者网络) At-rule 一.什么是at-rules eg:@charset "utf-8"; at-rule 是CSS样式声明,以@开头,紧跟着是 ...

  7. A Practical Guide to Distributed Scrum - 分布式Scrum的实用指南 - 读书笔记

    最近读了这本IBM出的<A Practical Guide to Distributed Scrum>(分布式Scrum的实用指南),书中的章节结构比较清楚,是针对Scrum项目进行,一个 ...

  8. 模仿微信&quot;转你妹&quot;游戏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. winform中如何在TextBox中只能输入数字(可以带小数点)

    可以采用像web表单验证的方式,利用textbox的TextChanged事件,每当textbox内容变化时,调用正则表达式的方法验证,用一个label在text后面提示输入错误,具体代码如下: pr ...

  10. 指向函数的指针 分类: C/C++ 2015-07-13 11:03 14人阅读 评论(0) 收藏

    原文网址:http://www.cnblogs.com/zxl2431/archive/2011/03/25/1995285.html 讲的很清楚,备份记录. (一) 用函数指针变量调用函数 可以用指 ...