【发布时间】：2012-04-16 23:37:01
【问题描述】：
我确实有一个使用媒体查询的 HTML5 文档。为了迎合旧浏览器的用户，我只是试图模拟 JS 中的行为并使用modernizr 2.5.3（我昨天从 HTML5 样板下载中获得的文件）来执行 mq-testing。
如果客户端使用简单的Modernizr.touch 支持触摸事件，我想做的另一件事是稍微更改 UI。
我这样做的方式如下：
//$window is $(window)
if ($window.width() < 575 || Modernizr.touch){
//change UI layout a little
}
if (Modernizr.touch){
//enable tap-navigation for touch devices
}
if (!Modernizr.mq('only all and (min-width: 575px)')){ //fix non-media query browsers
$window.resize(function(){
if ($window.width() < 575){
//add CSS
} else {
//remove CSS
}).trigger('resize');
}
这在 Webkit（移动和桌面）和 Firefox 中运行良好，但是当我尝试在 Opera (11.6) 或 Internet Explorer (7 到 9) 中打开页面时，地狱就崩溃了。事件将触发随机数量的时间，jQuery 动画将中途停止，老实说，我不知道会发生什么（虽然没有控制台错误）。当我删除页面顶部的modernizr脚本时，它工作得很好（当然特征检测除外......）。
我也在做的是使用html5shiv（我正在加载这个在现代版之后，但仍在头脑中），例如：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
我怀疑这是万一 IE 崩溃的罪魁祸首，但由于这对 Opera 的行为没有影响，我有点无能为力。
是我做错了什么还是这是某种错误，我应该寻找另一种方法来进行特征检测？
编辑：
当我试图找出正在发生的事情时，我发现了以下内容：似乎万恶之源只是媒体查询测试：Modernizr.mq('only all and (min-width: 575px)')。一旦这被称为事情变得疯狂。我可以将它记入控制台并得到正确的结果，但它似乎以某种奇怪的方式破坏了某些东西。此外，我可以通过从控制台调用它来中断正在运行的页面（以前没有调用过它）。
第 2 号编辑：
在寻找处理功能测试的替代方法时，我发现 this library 在 dev.opera 上（哇！）似乎在 Opera 中运行良好。然而它在 IE 中不起作用（Webkit 和 Firefox 都很好），因为它抱怨：
style.innerText = '@media ' + str + ' { #'+id+' { display:none !important; } }';
嗯。
第 3 号编辑：
所以我刚刚降级到modernizr 2.0.6，现在所有浏览器都运行良好。虽然我仍然不确定这是一个错误还是我做错了什么，所以我宁愿等一段时间再自己回答这个问题。
【问题讨论】：
-
我遇到了完全相同的问题。当我使用 Modernizr.mq() 时，我失去了页面上的所有功能，只是在 IE 中。 （没有测试歌剧）。我也没有在控制台中看到任何错误。
-
@EdCharbeneau 降级对您有帮助吗？非常适合我。
-
我使用了另一个依赖于modernizr 的库，所以我不想降级并冒险破坏其他东西。我在下面给出了一个答案，为我解决了这个问题，不幸的是它给了我另一个依赖。我不高兴，但它是开源的，你必须接受好的和坏的。
-
@EdCharbeneau 与操作系统你甚至可以改善坏处：P
-
当然，我会说利大于弊。 :D
标签： html internet-explorer opera media-queries modernizr