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

随机推荐

Hibernate学习——映射关系
学习记录 O(∩_∩)O . 如果你恰巧路过,希望你能停下脚步瞧一瞧,不足之处望指出,感激不尽~ 使用工具: 1.eclipse 2.hibernate压缩包(hibernate_4.3.11) ...
eclipse项目提交到git
http://www.open-open.com/lib/view/open1406105786710.html 1.在https://github.com new repository 2.在e ...
POJ 2594 - Treasure Exploration
一个星球上有很多点,点与点之间有很多单向路问可重点的最小路径覆盖利用floyd缩点后求二分图最大匹配 #include <iostream> #include <cstdio&g ...
xml 文件的增删改查
序列化和反序列化helper using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
ComboGrid 行内点击编辑内容
最近easyui需要在行内编辑选中项,但是编辑的内容出了当前选中列值,还有其他的,比较麻烦, 先看下这段代码 columns: [[ { field: 'GuestID', title: '编号', ...
国外程序员收集整理的PHP资源大全
依赖管理依赖和包管理库 Composer/ Packagist:一个包和依赖管理器 Composer Installers:一个多框架Composer库安装器 Pickle:一个PHP扩展安装器其 ...
AngularJS 中的 Promise 和设计模式
解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用.  $.get('ap ...
Lotto--poj2245
Lotto Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6605 Accepted: 4185 Description ...
TensorFlow深度学习笔记循环神经网络实践
转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论官方教程地址视频/字幕下载加 ...
Nginx学习之一-第一个程序Hello World
本例子实现了一个简单的hello world程序.运行效果: 虚拟机Ubuntu中: win7中chrome浏览器: 一.config文件编写 Nginx提供了一种简单的方式将第三方的模块编译到Ngi ...

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

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

随机推荐

热门专题