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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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中strlen和mb_strlen用法实例分析
2016/11/12 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
道德演讲稿
2014/05/21 职场文书
交通事故协议书范文
2014/10/23 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015年助残日活动总结
2015/03/27 职场文书
2016年五一促销广告语
2016/01/28 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android