使用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 background属性调整增强介绍
Dec 18 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
php英文单词统计器
2016/06/23 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JS中的三个循环小结
2017/06/20 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
Java程序员面试题
2016/09/27 面试题
美容院经理岗位职责
2014/04/03 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
比较node.js和Deno
2021/04/27 Javascript
浅析Django接口版本控制
2021/06/26 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
Oracle中日期的使用方法实例
2022/07/07 Oracle