使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法


Posted in HTML / CSS onApril 03, 2014

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中,我发现使用CSS媒体查询(media queries)虽然非常的有效,但有时,JavaScript却不能及时知道用户浏览设备的状态。浏览网站的用户使用的是桌面电脑,还是平板,还是手机?这对于CSS来说很容易,但CSS却无法将这些信息告诉JavaScript。我发明了一种基于CSS媒体查询和z-index属性的方法,能告诉JavaScript用户当前使用的是什么屏幕,这样我能调整JavaScript的动作来响应这种屏幕尺寸。

CSS代码

首先最重要的还是CSS媒体查询代码。这里只是示例,我们创建了三个媒体查询规则(但不包括缺省的“all”),它能控制四种屏幕情况:桌面(这是缺省状态,不需要媒体查询规则),“小屏幕”,平板,手机。针对每一种屏幕,我们给它一种不同的z-index值,这个值我们可以用JavaScript检测到。我们把这个元素定位到屏幕外,这样它就不会显示出来;记住,它的作用就是存放z-index值,我们要用javaScript获取这个值。

复制代码
代码如下:

/* 缺省屏幕 */
.state-indicator {
position: absolute;
top: -999em;
left: -999em;
z-index: 1;
}
/* 小屏幕 */
@media all and (max-width: 1200px) {
.state-indicator {
z-index: 2;
}
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator {
z-index: 3;
}
}
/* 手机 */
@media all and (max-width: 768px) {
.state-indicator {
z-index: 4;
}
}

每种z-index都在告诉我们的JavaScript当前的用户使用的是什么规格的屏幕。我们并不像知道用户究竟使用的是什么设备,因为你可以将浏览器宽度拉的很窄,但我们需要就是可视宽度,这样我们可以调整应用的布局。

JavaScript代码

也许你认为可以在DomContentLoaded时知道屏幕的大小,但我们需要实时知道屏幕的大小(因为用户会调整浏览器窗口的大小),我们需要有个方法获取当前窗口的属性:

复制代码
代码如下:

// 创建状态指示元素
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
// 获取设备类别的方法
function getDeviceState() {
return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}

使用这个方法,你就能检测出页面布局/js饰件中那些需要显示,那些需要隐藏。
复制代码
代码如下:

if(getDeviceState() < 3) { // 如果是桌面电脑后小屏幕电脑
// 显示js饰件....
}

有人也许会认为这些数字太容易搞错,让代码很难维护。其实我们可以用一个对象来处理这种事情:
复制代码
代码如下:
function getDeviceState() {
var index = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
var states = {
2: 'small-desktop',
3: 'tablet',
4: 'phone'
};
return states[index] || 'desktop';
}

这样,你就一个写出更具可读性的逻辑判断:
复制代码
代码如下:
if(getDeviceState() == 'tablet') {
// Do whatever
}

也许使用CSS的伪元素的content属性是个更好的方法:
复制代码
代码如下:

.state-indicator {
position: absolute;
top: -999em;
left: -999em;
}
.state-indicator:before { content: 'desktop'; }
/* 小屏幕桌面 */
@media all and (max-width: 1200px) {
.state-indicator:before { content: 'small-desktop'; }
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator:before { content: 'tablet'; }
}
/* 手机 */
@media all and (max-width: 768px) {
.state-indicator:before { content: 'mobile'; }
}

用下面的JavaScript方法获取关键的内容:
复制代码
代码如下:
var state = window.getComputedStyle(
document.querySelector('.state-indicator'), ':before'
).getPropertyValue('content')

如何组织这些代码全看你自己了。如果你有一个全局对象,例如window.config或window.app等,你可以把这些方法放到里面。我倾向于模块化这些功能,你可以把它做成jQuery插件或JavaScript工具包。不管你如何实现,它们都是你可以信赖的、简单易用的检测用户设备的好方法。

更上一层楼

我们知道屏幕尺寸会发生变化——用户手工调整浏览器大型或手机用户调整了手机方向,所以,当这些事件发生时,我们需要让系统告诉我们。下面这段简单的代码估计是你需要的:

复制代码
代码如下:
var lastDeviceState = getDeviceState();
window.addEventListener('resize', debounce(function() {
var state = getDeviceState();
if(state != lastDeviceState) {
// 保持当前的状态
lastDeviceState = state;
// 宣告状态变化,通过自定义的DOM事件或JS 消息发布/订阅模式,
// 我喜欢后者,所有就假设使用了一个这样的工具库
publish('/device-state/change', [state]);
}
}, 20));
// 用法
subscribe('/device-state/change', function(state) {
if(state == 3) {
// or "tablet", if you used the object
}
});

注意,这里我使用了debounce方法来执行resize事件发生时的动作——这对于性能来说非常重要。是使用自定义DOM事件还是使用发布/订阅模式,你自由选择,因为都很简单。

我觉得这种方法非常的好。有人可能会指出使用matchMedia也可以有相同效果,但问题是你需要在CSS里和JavaScript里都使用媒体查询,而有些媒体查询语句可能会很复杂,甚至会成为你的噩梦,不如使用简单的z-index。也有人会说可以使用 window.innerWidth来判断,但这样JS里获取的属性和CSS里的媒体查询就需要相互转换了,同样也会成为你的恶魔。我的方法的好处就在于你可以用它判断其他类型的媒体查询属性,例如检查手机是横向(landscape)还是竖向(portrait)。

不管怎样,你可以试一下,告诉我你的感觉!

HTML / CSS 相关文章推荐
CSS3 3D制作实战案例分析
Sep 18 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 #HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 #HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 #HTML / CSS
你应该知道的30个css选择器
Mar 19 #HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 #HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 #HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 #HTML / CSS
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
3.从实例开始
2006/10/09 PHP
php的curl封装类用法实例
2014/11/07 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Js sort排序使用方法
2011/10/17 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
Python中的字典遍历备忘
2015/01/17 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python如何实现数据的线性拟合
2019/07/19 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
零基础学python应该从哪里入手
2020/08/11 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
工作表现自我评价
2014/02/08 职场文书
教师教学评估方案
2014/05/09 职场文书
2014年团队工作总结
2014/11/24 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
创业计划书之花店
2019/09/20 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python torch.flatten()函数案例详解
2021/08/30 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技