使用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. Yii PHP 框架分析(三)

    作者:wdy http://hi.baidu.com/delphiss/blog/item/357663d152c0aa85a1ec9c44.html Yii应用的入口脚本引用出了Yii类,Yii类的 ...

  2. hdoj 2063 过山车【匈牙利算法+邻接矩阵or邻接表】

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. 利用ServletFileUpload组件上传文件

    自己的运用: public void UploadNoteFile(HttpServletRequest request,HttpServletResponse response){  String ...

  4. Qt4--加密日记本(子例化QMainWindow文本加密解密)

    近来刚学习Qt4编程,想找个实例练习练习,于是产生了一个想法,就是怎么样做一个文本加密,这样,自己保存的一些文档可以通过软件 生成加密文本,到时候要看的时候,通过自己的软件读取就可以.既然有想法了,那 ...

  5. WCF客户端和服务器时间不一致,导致通道建立失败的问题)

    本文转载:http://www.cnblogs.com/bcbr/articles/2288374.html 最近,经常有客户反应,前天还用的好好的系统,今天就不能用了. 考虑到系统近来没有做过改动和 ...

  6. 蜗牛—JSP学习之JavaBean初识

    初识: <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

  7. Ebean Demo

    ebean  orm框架,其作者觉得hibernate的bean管理会话管理.难以在短时间明确,就自己搞了一套,就成了如今的ebean. ebean被一些开发人员这觉得是一把瑞士军刀.能够看出一些程序 ...

  8. careercup-链表 2.6

    2.6 给定一个有环链表,实现一个算法返回环路的开头结点. 类似leetcode中 Linked List Cycle II C++实现代码: #include<iostream> #in ...

  9. java String的比较,BOX装箱拆箱,以及面向对象的小代码

    package cn.hncu.day2; public class StringDemo { public static void main(String[] args) { String str1 ...

  10. BaseAdapter优化深入分析

    BaseAdapter是一个数据适配器,将我们提供的数据格式化为ListView可以显示的数据,BaseAdapter的优化直接影响到ListView的显示效率. 我们都知道,ListView自带有回 ...