modernizr 2.5.3媒体查询测试在IE和Opera中打破页面

Question

我有一个使用媒体查询的HTML5文档.为了迎合旧浏览器的用户,我只是试图模仿JS中的行为,并使用modernizr 2.5.3(我昨天从HTML5 Boilerplate下载得到的文件)来进行mq测试.

我想做的另一件事是如果客户端使用简单的支持触摸事件,则稍微更改UI Modernizr.touch.

我这样做的方式如下:

//$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:

在寻找另一种处理功能测试的方法时,我在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。matchMedia 项目是由 Modernizr 贡献者之一 Paul Irish 开发的。事实上，如果页面上已经存在 mediaMatch，Modernizr 将调用 mediaMatch 来代替它自己的媒体查询测试。所以我下载了 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 一起使用。