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（我在现代化之后加载此，但仍然在脑中），如：



我怀疑这是IE崩溃的罪魁祸首，但由于这对Opera的行为没有任何影响，我有点无能为力。

我做错了什么或是某种错误我应该寻找另一种方法来进行功能检测？

修改：

当我试图找出发生了什么时，我发现了以下内容：似乎是所有邪恶的根源只是媒体查询测试：Modernizr.mq('only all and (min-width: 575px)')。一旦被称为事情就会变得疯狂。我可以将它记录到控制台中并获得正确的结果，但它似乎以某种奇怪的方式打破了某些东西。此外，我可以通过从控制台调用它来打破正在运行的页面（之前没有调用此页面）。

编辑第2号：

在搜索处理功能测试的另一种方法时，我在dev.opera上发现 this library ，（哇！）似乎在Opera中正常工作。然而它在IE中不起作用（Webkit和Firefox很好）因为它抱怨：

style.innerText = '@media ' + str + ' { #'+id+' { display:none !important; } }';

咩。

编辑第3号：

所以我刚刚降级到modernizr 2.0.6，现在所有浏览器的工作都很好。虽然我仍然不确定这是一个错误还是我做错了什么，所以我宁愿等一段时间才能自己回答。

Answer 1

今天我在Opera Mobile 9.5上遇到了类似的问题。可能是因为多个媒体查询测试使用相同的div引起的。 Opera开发人员的代码使用随机ID来测试媒体查询：

id = ('x'+Math.random()).replace(/\./,'');

但是modernizr的常规matchMedia polyfill使用相同的。也许在这些浏览器中没有删除它？我尝试过这样的事情：

min200 = ((Modernizr.mq('all and (min-device-width: 200px)')) ? "yes" : "no"); min400 = ((Modernizr.mq('all and (min-device-width: 400px)')) ? "yes" : "no"); ... min600 = ((Modernizr.mq('handheld')) ? "yes" : "no");

如果mq（）变为真，那么其余的也是如此。然而，这可能是错误的......

感谢您链接Opera！

Answer 2

好的，我尽我所能让它发挥作用。我确信我有最新版本的Modernizr，我将所有js隔离开来，只剩下最小的页面，但仍无效。

作为最后的手段，我浏览了Modernizr的源代码。在mq方法中，另一个项目是引用matchMedia。 matchMediaproject由Modernizr贡献者之一Paul Irish提供。实际上，如果mediaizr已经存在于页面上而不是自己的Media Query测试，它将调用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一起使用。

Answer 3

我在IE 7和8中遇到了同样的问题。所以我从github页面重新下载了库，问题似乎得到解决。我希望modernizr.com尽快使用新代码进行更新，以便下载自定义版本。

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

3 个答案: