有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏，普通屏，平板，手机？知道这些特征，我们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获取这个值。
JavaScript代码
也许你认为可以在DomContentLoaded时知道屏幕的大小，但我们需要实时知道屏幕的大小(因为用户会调整浏览器窗口的大小)，我们需要有个方法获取当前窗口的属性：
更上一层楼
我们知道屏幕尺寸会发生变化——用户手工调整浏览器大型或手机用户调整了手机方向，所以，当这些事件发生时，我们需要让系统告诉我们。下面这段简单的代码估计是你需要的：
我觉得这种方法非常的好。有人可能会指出使用matchMedia也可以有相同效果，但问题是你需要在CSS里和JavaScript里都使用媒体查询，而有些媒体查询语句可能会很复杂，甚至会成为你的噩梦，不如使用简单的z-index。也有人会说可以使用 window.innerWidth来判断，但这样JS里获取的属性和CSS里的媒体查询就需要相互转换了，同样也会成为你的恶魔。我的方法的好处就在于你可以用它判断其他类型的媒体查询属性，例如检查手机是横向(landscape)还是竖向(portrait)。
不管怎样，你可以试一下，告诉我你的感觉！