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

2024-07-11 08:31:18

字体：大中小

来源：转载

供稿：网友

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们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饰件中那些需要显示，那些需要隐藏。

上一篇：IE6下伪类hover失效问题及解决办法

下一篇：CSS通过RGBa将一个元素设置为透明效果