html5媒体查询的特点,巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法...
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们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)。
不管怎样,你可以试一下,告诉我你的感觉!
html5媒体查询的特点,巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法...相关推荐
- 媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和&q ...
- ajax请求的五个媒体查询,七个高度有效的媒体查询技巧
我们都知道,Media Queries是实现响应式设计的秘密武器.在这篇文章中,将向大家介绍制定高质量的Media Queries需要注意的一些事项. 让内容确定断点 很多时候,在响应式设计中,你经常 ...
- CSS之Responsive设计和CSS3 Media Queries的结合
随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- CSS:媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
- html调用媒体图标,关于CSS 媒体查询(media queries)
传统的CSS只支持数量有限的设备显示规则,如:all.screen.print.handheld.television和projector.这些对于设备的尺寸.方向或分辨率没有任何的定论.CSS2.1 ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
最新文章
- 你有一张邀请函:全球AI技术开发日南京站——9月8日走进地平线
- 17岁高中生独立开发全球最火疫情追踪网站
- writeValueAsString封装成工具类
- 数据库事务隔离技术之 Next-Key Locks
- python 把if 写在一行的两种方式
- php和python和javascript_Node.js与PHP、Python的字符处理性能对比
- Makefile和Cmake的联系与区别
- hive hql文档_大数据学习不能停,看看如何安装hive快800倍!共572.91M视频文档
- Hadoop之MapReduce介绍
- Windbg 离线调试.Net 程序入门
- mysql 导入oracle 11_导入oracle11g的数据库到自己本地电脑
- Android代码如何监控apk安装 卸载 替换
- 计算机数字音频工作站 pdf,分享一款开源和免费的数字音频工作站
- rufus制作u盘启动 linux系统安装
- Ubuntu下 VS code安装并配置C/C++模块
- 虚拟机全屏后隐藏vmware菜单栏的问题
- python实现——40W告警日志分析(上)
- SAP凭证的冲销-FB08
- do_bootm 分析
- JAVA毕业设计花卉网站计算机源码+lw文档+系统+调试部署+数据库
热门文章
- java fail fast_Java集合中的fail-fast(快速失败)机制详解
- 思科vrf配置实例_从原理到配置,最全的VLAN说明就在这了!
- c++语言 进行验证码识别,C++ 借助 Tesseract-OCR 识别乐讯新版验证码
- python科赫曲线编程实现雪花下落的效果_基于python绘制科赫雪花
- linux jupyter 远程,Linux下远程访问Jupyter Notebook 配置
- 文件上传后input怎么回显_tftp上传文件报错,tftp上传文件报错怎么办
- (11)Redis------分布式锁的实现方式之一(基于Springboot项目搭建)
- web项目目录访问 路径
- IPhone在横屏字体变大解决办法-webkit-text-size-adjust
- (数据挖掘-入门-4)基于物品的协同过滤