modernizr 2.5.3 IE和Opera中的媒體查詢測試中斷頁面

我確實有一個使用媒體查詢的HTML5文檔。爲了迎合舊版瀏覽器的用戶，我只是試圖模擬JS中的行爲，並使用modernizr 2.5.3（我昨天從HTML5 Boilerplate下載的文件）來執行mq-testing。modernizr 2.5.3 IE和Opera中的媒體查詢測試中斷頁面

我想要做的另一件事是如果客戶端使用簡單的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瀏覽器（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)')。一旦這被稱爲事情變得瘋狂。我可以將它記入控制檯並獲得正確的結果，但它似乎以某種奇怪的方式破壞了某些東西。另外，我可以通過從控制檯調用它來打破正在運行的頁面（以前沒有調用過該頁面）。

EDIT 2號：

在尋找一種替代的方法來處理功能的測試，我發現this library了在dev.opera那（哇！）似乎在Opera中很好地工作。

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

咩：然而，它並不在IE瀏覽器（WebKit和火狐都很好），因爲它抱怨工作。

EDIT 3號：

於是我就降級到2.0.6 Modernizr的事情和現在所有的瀏覽器工作得很好。儘管我仍然不確定這是一個錯誤還是我做錯了，所以我寧願等一段時間才能自己回答。

來源

2012-04-03 m90

我遇到了同樣的問題。當我使用Modernizr.mq（）時，我在頁面上丟失了所有的功能，只是在IE中。（沒有測試歌劇）。我也沒有看到控制檯中的任何錯誤。 – 2012-04-24 13:38:42

@EdCharbeneau做了降級幫助你嗎？爲我完美工作。 – m90 2012-04-24 15:30:31

我使用另一個依賴於modernizr的庫，所以我不想降級並冒險破壞別的東西。我在下面給出了一個答案，爲我解決了這個問題，不幸的是它給了我另一個依賴。我不開心，但是它是開源的，你必須把好與壞。 – 2012-04-24 15:44:09

好吧，我盡我所能讓這個工作。我確信我有最新版本的Modernizr，我隔離了所有的js，只留下頁面上的最低限度，仍然沒有任何作用。

作爲最後的手段，我瀏覽了Modernizr的源代碼。在mq方法中，另一個項目被引用matchMedia。 matchMedia項目由Modernizr的貢獻者之一Paul Irish負責。實際上，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工作。

來源

2012-04-24 15:40:29

這很有趣，雖然modernizr聲稱基於matchMedia使用某物，但實際功能測試的工作方式卻非常不同：https://gist.github.com/2480920也許應該將其作爲錯誤進行存檔。 – m90 2012-04-24 15:52:07

我今天和Opera Mobile 9.5有類似的問題。可能是由於多個媒體查詢測試使用相同的div引起的。歌劇院開發人員的代碼使用隨機ID來測試媒體查詢：

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

但Modernizr的例行matchMedia填充工具使用相同的。也許它不會在這些瀏覽器中被刪除？我已經試過這樣的事情：

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！

來源

2012-04-18 21:11:13 aldi

我在IE 7和8中遇到了同樣的問題。於是我去了並重新從github頁面下載了這個庫，這個問題似乎被修復了。我希望modernizr.com儘快更新新代碼，以便我可以下載自定義構建。

來源

2012-04-24 15:01:31 f88

那你現在用哪個版本號？ [這一個]（https://github.com/Modernizr/Modernizr/blob/master/modernizr.js）仍然被稱爲2.5.3，所以我有點害怕...感謝您的輸入！ – m90 2012-04-24 15:32:23

modernizr 2.5.3 IE和Opera中的媒體查詢測試中斷頁面

回答

相關問題