html - modernizr 2.5.3 媒体查询测试中断了 IE 和 Opera 中的页面

Question

我有一个使用媒体查询的 HTML5 文档。为了迎合旧浏览器的用户，我只是试图模拟 JS 中的行为并使用 modernizr 2.5.3(我昨天从 HTML5 Boilerplate 下载中获得的文件)来执行 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 (我在 modernizr 之后加载这个 ，但仍在头脑中)像:

<!--[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，现在所有浏览器都运行良好。虽然我仍然不确定这是一个错误还是我做错了什么，所以我宁愿等一段时间再自己回答。

Answer 1

好的，我尽我所能让它工作。我确保我有最新版本的 Modernizr，我隔离了我所有的 js，只在页面上留下了最低限度的内容，但仍然没有任何效果。

作为最后的手段，我查看了 Modernizr 的源代码。在mq方法中，引用了另一个项目matchMedia。 matchMediaproject 由 Modernizr 贡献者之一 Paul Irish 设计。事实上，如果 mediaMatch 已经存在于页面上，Modernizr 将调用它来代替它自己的媒体查询测试。所以我下载了 matchMedia.js 并将其添加到我的项目中，这解决了我的问题。

   //From moderizr source, remarks are my notes.
    testMediaQuery = function( mq ) {

   //if matchMedia or msMatchMedia return the matchMedia result, else execute modernizr code
          var matchMedia = window.matchMedia || window.msMatchMedia; 
          if ( matchMedia ) {
            return matchMedia(mq).matches;
          }
    //if mediaMatch is not found the moderizr version of this method executes...

您可以在这里获取 matchMedia.js，https://github.com/paulirish/matchMedia.js

更新: 我重新生成了 2.5.3 的自定义构建，它可以与 matchMedia.js 配合使用。