使用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 ...

随机推荐

浅谈HTML5拖放
现在,新增的HTML5元素很多,也给开发者带来了很多便利,比如说:结构标记header .nav.arctile.section.footer 表单元素:url.date.emaile.search. ...
垃圾回收器 Dispose 和 Finalize 的互补作用
假如我们程序有两个窗口 Form1.Form2; 当我们关闭一个窗口的时候,会发出一个终止响应,并将该窗口对象送入终止队列,公共语言运行库的垃圾回收器跟踪着这个对象的生存期,此时就会调用此对象的基类 ...
从汇编看c++成员函数指针(二)
下面先看一段c++源码: #include <cstdio> using namespace std; class X { public: virtual int get1() { ; } ...
section 模块页面切换代码
<div class="blockcode"><blockquote><!DOCTYPE html><html><head&g ...
phonegap安卓环境下使用BarcodeScanner插件扫描二维码教程
由于一直在使用phoneGap来开发安卓应用,而对于原生Java小白的我最近这几天一直陷入了如何使用phonegap的BarcodeScanner插件这件事情上,可以说查遍了百度和Google,虽然只 ...
MySQL load data infile
语法: load data [low_priority] [local] infile ‘file_path' [replace] [ignore] into table table_name [(c ...
【POJ 2823 Sliding Window】单调队列
题目大意:给n个数,一个长度为k(k<n)的闭区间从0滑动到n,求滑动中区间的最大值序列和最小值序列. 最大值和最小值是类似的,在此以最大值为例分析. 数据结构要求:能保存最多k个元素,快速取得 ...
poj1458 dp入门
Common Subsequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37551 Accepted: 15 ...
android 拍照 onCreate() 调用两次的问题
拍照的代码网上都有就不写了!自己找下就ok了! 1 旋转屏幕导致问题! 这种情况很好解决:在androidManifest.xml 中设置activity 添加属性 android:configC ...
sql 中的 indexOf 与 lastIndexOf
DECLARE @Name NVARCHAR (50)SET @Name = '12345.67890ABCDE.FGHIJKLMNOPQRSTUVWXYZTest' DECLARE @Positio ...

使用device.js检测设备并实现不同设备展示不同网页

使用device.js检测设备并实现不同设备展示不同网页的更多相关文章

随机推荐

热门专题