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 继承实现方法
Aug 26 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
jquery创建div 实现代码
2009/04/27 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Python 学习笔记
2008/12/27 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python方向键控制上下左右代码
2018/01/20 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
中年人生感言
2014/02/04 职场文书
培训班主持词
2014/03/28 职场文书
测控技术自荐信
2014/06/05 职场文书
亲戚关系证明
2015/06/24 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
Golang获取List列表元素的四种方式
2022/04/20 Golang