有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站 -- 宽屏, 普通屏, 平板, 手机? 知道这些特征, 我们 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(Windows.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
- }
使用这个方法, 你就能检测出页面布局 / JS 饰件中那些需要显示, 那些需要隐藏.
- if(getDeviceState() < 3) { // 如果是桌面电脑后小屏幕电脑
- // 显示 JS 饰件....
- }
有人也许会认为这些数字太容易搞错, 让代码很难维护. 其实我们可以用一个对象来处理这种事情:
- function getDeviceState() {
- var index = parseInt(Windows.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 = Windows.getComputedStyle(
- document.querySelector('.state-indicator'), ':before'
- ).getPropertyValue('content')
如何组织这些代码全看你自己了. 如果你有一个全局对象, 例如 Windows.config 或 Windows.App 等, 你可以把这些方法放到里面. 我倾向于模块化这些功能, 你可以把它做成 jQuery 插件或 JavaScript 工具包. 不管你如何实现, 它们都是你可以信赖的, 简单易用的检测用户设备的好方法.
更上一层楼
我们知道屏幕尺寸会发生变化 -- 用户手工调整浏览器大型或手机用户调整了手机方向, 所以, 当这些事件发生时, 我们需要让系统告诉我们. 下面这段简单的代码估计是你需要的:
- var lastDeviceState = getDeviceState();
- Windows.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. 也有人会说可以使用 Windows.innerWidth 来判断, 但这样 JS 里获取的属性和 CSS 里的媒体查询就需要相互转换了, 同样也会成为你的恶魔. 我的方法的好处就在于你可以用它判断其他类型的媒体查询属性, 例如检查手机是横向 (landscape) 还是竖向(portrait).
不管怎样, 你可以试一下, 告诉我你的感觉!
来源: http://www.webhek.com/post/device-state-detection-css-media-queries-javascript.html