javascript - 测试 (x) 的 CSS 属性值以查看特定媒体查询是否对 JS 等的条件加载有效...

Question

想知道人们在这样做时可能会遇到什么问题。以下是在一个简单的 POC 中似乎有效的方法:

针对所有合适样式的一些媒体查询:

@media screen and (max-device-width : 640px) {
  body:after {
    display: none;
    content: 'mobile';
  }
  etc ...
}

然后测试:

var isMobile = window.getComputedStyle(document.body, ':after').content === 'mobile' ? true : false;

然后很明显:

if ( isMobile ) doMobileAndLoadStuff();

对我来说，这似乎比一堆用于检测屏幕尺寸或用户代理字符串的 JS 更干净。我知道 IE8 不支持 getComputedStyle 但这很容易解决。有人认为这是好事还是坏事？有没有我看不到的陷阱？是否有更清洁更简单的解决方案？

Answer 1

这正是Modernizr是为了。

---

什么是 Modernizr？

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable) navigator.userAgent property, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their userAgent string to get around poorly developed websites that don’t let them through otherwise.

Modernizr aims to bring an end to the UA sniffing practice. Using feature detection is a more reliable mechanic to establish what you can and cannot do in the current browser, and Modernizr makes it convenient for you in a variety of ways:

• It tests for over 40 next-generation features, all in a matter of milliseconds

• It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties

• It adds classes to the html element that explain precisely what features are and are not natively supported

• It provides a script loader so you can pull in polyfills to backfill functionality in old browsers

With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.

为什么要使用 Modernizr？

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

工作原理

For a lot of the tests, Modernizr does its “magic” by creating an element, setting a specific style instruction on that element and then immediately retrieving it. Browsers that understand the instruction will return something sensible; browsers that don’t understand it will return nothing or “undefined”.

Many tests in the documentation come with a small code sample to illustrate how you could use that specific test in your web development workflow. Actual use cases come in many more varieties, though. The possible uses of Modernizr are limited only by your imagination.

If you’re really interested in the details of how Modernizr works, look at the source code of modernizr.js and the various feature detects, and dig into the project on GitHub.

支持的浏览器

We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst we’re still doing more testing we believe we support Blackberry 6+.

查看 full list of features Modernizr 检测到，或了解有关 conditional resource loading with Modernizr 的更多信息.