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; 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列表：
|
实例下载：设备检测demo(http://files.cnblogs.com/zhidong123/devide-test.rar)
javascript判断设备类型-手机(mobile)、安卓(android)、电脑(pc)、其他(ipad/iPod/Windows)等的更多相关文章
- JavaScript判断当前手机是Android还是iOS系统
$(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(' ...
- asp.net或javascript判断是否手机访问
/// <summary> /// 判断手机用户UserAgent /// </summary> /// <returns></returns> pri ...
- 【函数封装】javascript判断移动端操作系统为android 或 ios 或 iphoneX
function isPhone(){ var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.index ...
- 启明星手机版安卓android会议室预定系统 V1.0发布
启明星手机版会议室预定系统 V1.0发布 在手机里输入 http://www.dotnetcms.org/e4.apk 或者扫描二维码下载 用户打开系统,可以实时查看所有会议室状态 点击会议室名称,可 ...
- [JavaScript] 判断设备类型，加载相应css
$(document).ready(function () { var browser = { versions: function () { var u = navigator.userAgent, ...
- 用JavaScript判断网站是在手机端还是在PC端打开的方法
我们可以在网站的首页加上一段JavaScript代码对用户的浏览器进行判断,从而显示不同的网址,代码如下: <script type="text/javascript"> ...
- PHP和javascript判断用户使用的是手机还是电脑
PHP判断手机还是电脑 <?php $is_mobile = (is_mobile() == true) ? "手机" : "电脑"; echo '< ...
- Andy - 又一款速度流畅的免费安卓 Android 模拟器 (支持手机无线控制电脑模拟器)
随着 Genymotion.BlueStacks 等电脑上的 Android 模拟器流行起来之后,似乎很多人都发现在电脑上运行使用安卓APP软件.畅玩手机游戏确实很有乐趣. 今天我们又发现了一款全新免 ...
- JavaScript判断是否是手机mobile登录
在页面代码中加入以下js,即可利用JavaScript判断是否是手机mobile登录! <script type="text/javascript" src="${ ...
随机推荐
- 集中式vs分布式
Linus一直痛恨的CVS及SVN都是集中式的版本控制系统,而Git是分布式版本控制系统,集中式和分布式版本控制系统有什么区别呢? 先说集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候 ...
- ElasticSearch怎样加入，检索数据
Elasticsearch是一个分布式的文档(document)存储引擎.它能够实时存储并检索复杂数据结构--序列化的JSON文档.换言说,一旦文档被存储在Elasticsearch中,它就能够在集群 ...
- [Angular 2] DI in Angular 2 - 1
Orgial aritial --> Link The problem with Angular 1 DI: Angular 2 DI: Solve the singletons problem ...
- 装有Win7系统的电脑在局域网不能共享的解决方案
Win7系统的网络功能比XP有了进一步的增强,使用起来也相对清晰.但是由于做了很多表面优化的工作,使得底层的网络设置对于习惯了XP系统的人来说变得很不适应,其中局域网组建就是一个很大的问题.默认安装系 ...
- Anroid搭建一个局域网Web服务器
前言 很多开发者看到这个标题表示很怪异,Android怎么可能搭建服务器呢?根本用不到呀,这个项目毫无价值.我表示很理解这一类的开发者,毕竟每个人的经验经历都是有限的. 必须要说说我们的用处(需要 ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- JavaScript入门(2)
一.JS输出内容--(document.write) document.write()可用于直接向HTML输出流写内容,即直接在网页中输出内容. 第一种:输出内容用" "括起来,直 ...
- javascript的面向对象编程
面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接 ...
- NLog 安装使用
1:安装 Install-Package NLog.Config 或 通过Nuget 2:Log levels Trace 非常详细的信息,一般在开发时使用. Debug 比Trace稍微少一点一般不 ...
- WisDom.Net 框架设计(六) license
WisDom.Net-license 1.为啥要用license license (许可证) 顾名思义就是说我的软件只能给在指定的机器上使用.毕竟很多项目都不是免费的,(说句题外话,其实我用的也 ...