使用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. Ubuntu 如何使用apt命令安装、升级、卸载软件

    apt-get是一条linux命令,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统. apt-get命令一般需要root权限执行,所以一般跟着su ...

  2. 如何在 Linux 终端下创建新的文件系统/分区

    在 Linux 中创建分区或新的文件系统通常意味着一件事:安装 Gnome Parted 分区编辑器(GParted).对于大多数 Linux 用户而言,这是唯一的办法.不过,你是否考虑过在终端创建这 ...

  3. cocos 事件转发

    CCDirector在函数setOpenGLView中设置pobOpenGLView,同时会掉用 m_pobOpenGLView->setTouchDelegate(m_pTouchDispat ...

  4. Expression Blend 4 激活码

    Expression Blend 4 激活码: 6WDDQ-K7D4F-GQGF4-2VYBJ-8K6MB

  5. 【设计模式 - 24】之访问者模式(Visitor)

    1      模式简介 访问者模式的定义: 访问者模式将数据结构与数据操作进行了分离,解决了稳定的数据结构和易变的数据操作的耦合问题. 访问者模式的优点: 1)        符合单一职责原则: 2) ...

  6. leetcode__Convert Sorted List to Binary Search Tree

    Convert Sorted List to Binary Search Tree Total Accepted: 12283 Total Submissions: 45910My Submissio ...

  7. SQL Server与Oracle对比学习:权限管理(二) 一些有趣的比喻

    http://blog.csdn.net/weiwenhp/article/details/8094739 目录(?)[-] SQL Server权限管理 login 与user的区别 角色role ...

  8. android 64 sd卡读写的操作

    package com.itheima.writesd; import java.io.File; import java.io.FileNotFoundException; import java. ...

  9. group by是什么意思 mysql中

    mysql语法中group by是什么意思? 在百度中搜索半天,最后找到一篇解释比较好的(不是博文,是百度知道,很郁闷那么多网友怎么就没人解释的清楚),链接如下: http://zhidao.baid ...

  10. jackson 学习笔记

    Jackson以优异的解析性能赢得了好评,今天就看看Jackson的一些简单的用法. Jackson使用之前先要下载,这里一共有三个jar包,想要获得完美的Jackson体验,这三个jar包都不可或缺 ...