想知道人们可能会看到这样做的问题。这是在一个简单的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，但可以轻松解决。有人认为这是好事还是坏事？有没有我看不到的东西？是否有更简洁的解决方案？
答案 0 :(得分：0)
这正是Modernizr的用途。
Modernizr是一个小型JavaScript库，检测可用性 用于下一代Web技术的本机实现，即 源自HTML5和CSS3规范的功能。很多 这些功能已经在至少一个主要浏览器中实现 （他们中的大多数在两个或更多），而Modernizr所做的是，非常 简单地说，告诉您当前浏览器本机是否具有此功能 是否实施。
与传统但非常不可靠的“UA”方法不同 嗅探，“通过它检测浏览器（用户可配置）
navigator.userAgent属性，Modernizr执行实际的特征检测 可靠地辨别各种浏览器可以做什么和不能做什么。后 所有，相同的渲染引擎可能不一定支持相同的渲染引擎 事情，一些用户改变他们的userAgent字符串来绕过 发展不良的网站，不会让他们通过其他方式。Modernizr旨在结束UA嗅探练习。运用 特征检测是一种更可靠的机制来建立你的东西 在当前的浏览器中可以做也可以做不到，而且Modernizr可以做到 以各种方式方便您：
它测试了40多个下一代功能，所有功能都在几毫秒内完成
它创建一个JavaScript对象（名为
Modernizr），其中包含这些测试的结果作为布尔属性它向
html元素添加了类，这些类可以准确地解释哪些特性是本机支持的？它提供了一个脚本加载器，因此您可以在旧浏览器中提取polyfills以回填功能
凭借Modernizr为您提供的这些知识，您可以充分利用 浏览器中可以渲染或利用它们的这些新功能， 并且仍然有简单的和可靠的控制情况的手段 对于不能的浏览器。
利用酷炫的新网络技术 很有趣，直到你必须支持落后的浏览器。 Modernizr使您可以轻松编写条件JavaScript 和 用于处理每种情况的CSS，无论浏览器是否支持某项功能 不。它非常适合轻松进行渐进式增强。
对于很多测试，Modernizr通过创建一个“魔术”来实现它的“魔力” 元素，然后设置该元素的特定样式指令 立即检索它。理解指令的浏览器 会回报一些明智的东西;浏览器不理解它 没有返回或“未定义”。
文档中的许多测试都带有一个小代码示例 说明如何在Web中使用该特定测试 开发流程。实际使用案例有很多种， 虽然。 Modernizr的可能用途仅限于您的 想象。
如果您真的对Modernizr的工作原理感兴趣， 看看modernizr.js的source code和各种功能 检测到，dig into the project on GitHub。
我们支持IE6 +，Firefox 3.5 +，Opera 9.6 +，Safari 2 +，Chrome。上 移动，我们支持iOS的移动Safari，Android的WebKit浏览器， Opera Mobile，Firefox Mobile，我们还在进行更多测试 我们相信我们支持Blackberry 6 +。
查看Modernizr检测到的full list of features，或详细了解conditional resource loading with Modernizr。