使用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. 修复直接删除linux系统后grub丢失错误

    如果删除了系统后,grub丢失,开机出现“grub>”的话,可以用如下代码进入目标linux系统:grub>ls (hd0,X)/boot             //x为目标系统所在分区 ...

  2. [置顶] shell变量赋值-linux

    Shell变量赋值 命名须规则: 1)使用变量无需事先声明 2)首个字符必须为字母(a-z,A-Z) 3)中间不能有空格,可以使用下划线(_) 4)不能使用标点符号 5)不能使用bash里的关键字(可 ...

  3. 安装Office时出现windows installer服务不能更新一个或多个受保护的windows文件错误的解决方法

    今天在Windows XP上安装Microsoft Office 2010时,总是遇到“Windows Installer服务不能更新一个或多个受保护的windows文件,安装失败,正在回滚更改”提示 ...

  4. Python抓取淘宝IP地址数据

    def fetch(ip): url = 'http://ip.taobao.com/service/getIpInfo.php?ip=' + ip result = [] try: response ...

  5. PostgreSQL相关的软件,库,工具和资源集合

    PostgreSQL相关的软件,库,工具和资源集合. 备份 wal-e - Simple Continuous Archiving for Postgres to S3, Azure, or Swif ...

  6. 利用URL重写实现参数目录化

    参数目录化,就是将 类似 http://www.abc.com/store/store.aspx?id=1024 这样的网址,对外改为 http://www.abc.com/1024. 要实现这种功能 ...

  7. Character frequency

    地址:http://www.codewars.com/kata/53e895e28f9e66a56900011a/train/python Write a function that takes a ...

  8. 四种可变交流swap方法

    1.void swap(int &x, int &y){ int temp=x; x=y; y=temp; } 2.void swap(int &x, int &y){ ...

  9. 使用内省方式操作JavaBean

    内省,英文中称作introspector.主要对javaBean进行操作,JavaBean是一个特殊的Java类,该类中方法名符合特定的规则(其实就是getXXX,setXXX),我们一般是利用get ...

  10. Windows Server 2008 R2 安装及配置指南

    一.安装需求: 1. 硬件需求条件 硬件 需求 处理器 最低:1.4 GHz(x64处理器) 注意:Windows Server 2008 for Itanium-Based Systems 版本需要 ...