使用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制作的20种loading动效
Jul 05 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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
php中CI操作多个数据库的代码
2012/07/05 PHP
php广告加载类用法实例
2014/09/23 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
VBScript版代码高亮
2006/06/26 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
跟老齐学Python之用Python计算
2014/09/12 Python
python中ConfigParse模块的用法
2014/09/29 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
django使用graphql的实例
2020/09/02 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
opencv实现图像几何变换
2021/03/24 Python
会议活动邀请函
2014/01/27 职场文书
优秀医生事迹材料
2014/02/12 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
会计工作态度自我评价
2015/03/06 职场文书
学校实习推荐信
2015/03/27 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏