您的位置：首页 > 移动开发 > Android开发

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

2014-06-24 18:17 591 查看
使用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列表：

DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
实例下载：设备检测demo(http://files.cnblogs.com/zhidong123/devide-test.rar)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航