JavaScript根据CSS的Media Queries来判断浏览设备的方法


Posted in Javascript onMay 10, 2016

CSS 部分

首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值。这个类仅作为 JavaScript 读取使用,所以需要将其移出屏幕窗口,让浏览者不可见以免引起意外情况。

作为演示,下面代码设置了四种设备状态:桌面普通版、小屏幕桌面版、平板电脑版和手机版。

/* default state */
.state-indicator {
  position: absolute;
  top: -999em;
  left: -999em;

  z-index: 1;
}

/* small desktop */
@media all and (max-width: 1200px) {
  .state-indicator {
    z-index: 2;
  }
}

/* tablet */
@media all and (max-width: 1024px) {
  .state-indicator {
    z-index: 3;
  }
}

/* mobile phone */
@media all and (max-width: 768px) {
  .state-indicator {
    z-index: 4;
  }
}

JavaScript 判断

CSS 已经就位了,那么就需要用 JavaScript 来生成了一个临时的 DOM 对象,然后为它设置对应的类,然后再读取这个对象的 z-index 值。原生的写法如下:

// Create the state-indicator element
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);

// Create a method which returns device state
function getDeviceState() {
  return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}
getDeviceState() 函数返回的就是 z-index 的值,为了增强一下可读性,可以用 switch 函数来规范输出一下:

function getDeviceState() {
  switch(parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10)) {
    case 2:
      return 'small-desktop';
      break;
    case 3:
      return 'tablet';
      break;
    case 4:
      return 'phone';
      break;
    default:
      return 'desktop';
      break;
  }
}

这样,就可以用一下代码来判断设备状态,然后执行相应的 JavaScript 代码:

if(getDeviceState() == 'tablet') {
  // 平板电脑下执行的 JavaScript 代码
}

这里如果你使用的是 jQuery,直接使用下面代码就可以了:

$(function(){
  $('body').append('<div class="state-indicator"></div>');

  function getDeviceState() {
    switch(parseInt($('.state-indicator').css('z-index'),10)) {
      case 2:
        return 'small-desktop';
        break;
      case 3:
        return 'tablet';
        break;
      case 4:
        return 'phone';
        break;
      default:
        return 'desktop';
        break;
    }
  }

  console.log(getDeviceState());
  $('.state-indicator').remove();
});

先创建,然后获取,最后删掉这个节点,具体的设备会在你的控制台中输出,点击这里查看 Demo ,可以试着拖动一下中间的边框,然后点击 Run。

Javascript 相关文章推荐
javascript遍历控件实例详细解析
Jan 10 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
JavaScript中的原型prototype完全解析
May 10 #Javascript
简单解析JavaScript中的__proto__属性
May 10 #Javascript
Web Uploader文件上传插件使用详解
May 10 #Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 #Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 #Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 #Javascript
javascript关于继承解析
May 10 #Javascript
You might like
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
从0开始学Vue
2016/10/27 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
详解datagrid使用方法(重要)
2020/11/06 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python比较两个列表是否相等的方法
2015/07/28 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
介绍一下sql server的安全性
2014/08/10 面试题
放飞蜻蜓反思
2014/02/05 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
离婚协议书的范本
2015/01/27 职场文书
教学督导岗位职责
2015/04/10 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
Android中View.post和Handler.post的关系
2022/06/05 Java/Android