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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 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随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
代码分析Python地图坐标转换
2018/02/08 Python
python3 flask实现文件上传功能
2020/03/20 Python
python生成九宫格图片
2018/11/19 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
数据库的约束含义
2012/09/09 面试题
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
2015年财政所工作总结
2015/04/25 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
财产分割协议书
2016/03/22 职场文书
创业计划书之面包店
2019/09/12 职场文书