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 valueOf 使用方法
Dec 28 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
编程语言JavaScript简介
Oct 16 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
JS变量提升及函数提升实例解析
Sep 03 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PDO::getAttribute讲解
2019/01/28 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Python实现二分查找算法实例
2015/05/26 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
社区健康教育实施方案
2014/03/18 职场文书
赔偿协议书范本
2014/04/15 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android