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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
js实现简单数字变动效果
Nov 06 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php socket通信简单实现
2016/11/18 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
python实现word 2007文档转换为pdf文件
2018/03/15 Python
django Serializer序列化使用方法详解
2018/10/16 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python检测服务器端口代码实例
2019/08/31 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
python文件路径操作方法总结
2020/12/21 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
什么是网络协议
2016/04/07 面试题
几个Shell Script面试题
2012/08/31 面试题
介绍一下Java的事务处理
2012/12/07 面试题
办公室员工岗位工作职责
2014/03/10 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
高二化学教学反思
2016/02/22 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技