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

随机推荐

java 包之 BeanUtils包的使用
BeanUtils工具包是由Apache公司所开发,主要是方便程序员对Bean类能够进行简便的操作. 在使用BeanUtils工具包之前我们需要的Jar包有以下几种: (1) BeanUtils相 ...
VB.NET Shared（共享）和 Static（静态）关键字的区别
共享成员(Shared): VB.NET现在是支持真正的面向对象编程,可以继承.使用多态.共享成员和静态成员. 共享成员就是在所有类和所定义派生类的实例之间共享的方法.属性.字段和事件.所有使用类 ...
HDU-1049
Description An inch worm is at the bottom of a well n inches deep. It has enough energy to climb u i ...
js 去掉字符串最后一个字符
var str = str.substring(0,str.length-1); alert(str); 注:length 需小写.
sqlite数据库常用语句
这个文件型数据库小巧好用,可以替代ACCESS,以下是常用的语句获取数据库时间(设计表字段时的当前时间默认值) sqlite datetime('now', 'localtime') ...
Flask把变量注册到模板中
使用python的Flask框架时,参考<Flask Web开发>一书时,发现书中可以在全局使用Permission.FOLLOW变量. 但是自己在尝试是,确提示变量没有定义.经过搜索,找 ...
python 源代码分析之调试设置
首先在官方下载源代码,我下载的是最新版本3.4.3版本:https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz 解压后的目录如下(借用网上的目 ...
UICollectionView 集合视图用法,自定义Cell
在View里面 //1.创建UICollectionViewFlowLayout UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFl ...
LINUX下QT与C语言通过网卡名获取网卡IP与MAC
1.QT下 QString RuntimeConfig::ipAddress(QString network) { QList<QNetworkAddressEntry> list; QS ...
Node.js HTTP 使用详解
对于初学者有没有发觉在查看Node.js官方API的时候非常简单,只有几个洋文描述两下子,没了,我第一次一口气看完所以API后,对于第一个示例都有些懵,特别是参数里的request和response, ...

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

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

随机推荐

热门专题