使用device.js检测设备并实现不同设备展示不同网页
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果，但是有些时候想在直接在PC上展示一个做好的页面，在mobile展示另一个页面。这个时候可以借助device.js来检测设备，然后打开不同的页面（device.js 是一个可以用来检测设备，操作系统和方向的js库）。当然这种做法需要一次跳转。
假设有个m.html想用于mobile端展示，pc.html想用于pc端展示。这个时候可以用index.html作为入口，在<head>内引入device.js来检测设备，然后用js来实现跳转。
当设备为Mobile和tablet的时候展示m.html
否则展示pc.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>responsive demo</title>
<script src="device.js"></script>
</head> <body style="margin: auto; position: absolute; width:100%; height: 100%"> <script>
var isMobile = device.mobile(),
isTable = device.tablet(); if(isMobile || isTable){
window.open("m.html","_self");
}
else{
window.open("pc.html","_self");
}
</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);
当然，也可以用device.js来逐个检测设备。
javascript方法如下。
| 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() |
| MeeGo | device.meego() |
比如可以用如下代码来检测设备是否为IOS设备
var isIPhone = device.iphone(),
isIPad = device.ipad(); var isIOS = isIPhone || isIPad; if(isIOS){
alert(
"is this iOS?"+isIOS
);
}
或者可以用来控制当为mobile或者tablet的时候加载m.css, PC的时候加载pc.css
if(isMobile | isTable){
document.write( ' <link rel="stylesheet" href="m.css">');
}
else{
document.write('<link rel="stylesheet" href="pc.css">');
}
使用device.js检测设备并实现不同设备展示不同网页的更多相关文章
- Device.js——检测设备平台、操作系统的Javascript 库
http://segmentfault.com/a/1190000000373735 Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <h ...
- 检测设备平台，操作系统，方向 Javascript 库：Device.js
Device.js 是一个可以让你检测设备的平台,操作系统和方向 JavaScript 库,它会自动在 <html> 标签添加一些设备平台,操作系统,方向相关的 CSS class,这样就 ...
- Device.js – 快速检测平台、操作系统和方向信息
在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...
- 通过JS检测360浏览器
如何通过JS检测360浏览器? 尝试了一大堆方法,网上大多数办法都是通过navigator.userAgent来判断,这可能在几年前是行得通的,现在360userAgent输出来跟谷歌除了版本号其余一 ...
- 通过js检测到iframe，使父窗口重定向到index -----------？？？----------------------
通过js检测到iframe,使父窗口重定向到index -----------???---------------------- 如果本身已将在iframe中,那么重定向的页面应该直接添加到父级ifr ...
- 如何用js检测判断时间日期的间距
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js检测是否手机浏览的函数
原文:js检测是否手机浏览的函数 查看一个web应用的时候查看源代码无意发现的,记录一下,万能什么时候能用得着呢! function isMobile() { var mobile = navigat ...
- CSS检测的高像素密度屏幕设备
iPhone4尽管是640px解析度,但它的屏幕宽度(device-width)目前只有320px和iPhone3G相同.只是iPhone4S的像素密度2. 然后使用meta viewport什么时候 ...
- jquery和js检测浏览器窗口尺寸和分辨率
jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...
随机推荐
- 【IOS学习基础】文件相关
一.沙盒(SandBox) 1.沙盒机制 1> 每个应用都有属于自己的存储空间,即沙盒. 2> 应用只能访问自己的沙盒,不可访问其他区域. 3> 如果应用需要进行文件操作,则必须将文 ...
- stl的集合set——安迪的第一个字典（摘）
set就是数学上的集合——每个元素最多只出现一次,和sort一样,自定义类型也可以构造set,但同样必须定义“小于”运算符 以下代码测试set中无重复元素 #include<iostream&g ...
- MyEclipse破解方法
Myeclipse 2014 破解补丁,首先需要先下载 Myeclipse 2014 官方安装文件,下载地址 http://www.jb51.net/softs/150886.html,然后下载此补丁 ...
- python 2.6升级到2.7
CentOS 6.5上安装的python版本是2.6.6,不能满足我运行软件的要求,所以对python进行升级. 原以为这也就是安装个软件的事儿,在我求稳搜索一下了之后发现,也并不是那么单纯简单. 下 ...
- Django学习(二) Django框架简单搭建
为了快速学习Python进行Web的开发,所以我不准备从Python的基础学起,直接从Django框架入手,边学框架边学Python的基础知识. 下面就开始Django的快速开发之旅吧. 关于Djan ...
- STM32F051关于printf函数在串口打印中的使用
1.需要在Options for Target -> Code Generation 中勾选Use MicroLIB: 2.需要加入下面这个函数: int fputc(int ch, FILE ...
- SQL Server数据库空间管理 (2)
本篇内容主要解决剩余的两个问题:2).日志文件不停增长 4).自动增长和自动收缩 日志文件不停增长的解决 首先,当日志文件超过预期的时候,我们然要看看日志文件中存放了什么内容:DBCC LOG ; ...
- racle undo 解析
racle undo 解析 声明一下:关于oracle的文章基于boobooke小布老师视频,在我学习的过程中,每有体会拿来分享,虽然从理解到整理分享很耗时,但我想这样的学习是扎实的. Undo是干嘛 ...
- Linux命令（持续更新ing）
*.命令语法: a.在进行参数设定时,通常为“-”号,若为完整参数名称,则输入“--”符号; b.指令太长的时候,可以使用“\”符号使指令连续到下一行; c.各种符号的意义: '' ...
- C语言的本质（18）——函数的可变参数
一般而言,在设计函数时会遇到许多数学和逻辑操作,是需要一些可变功能.例如,计算数字串的总和.字符串的联接或其它操作过程. 实现一个函数,要求在函数中计算传入的所有参数之和,并输出到屏幕上.这个函数实现 ...