modernizr 2.5.3 test dell'interrogazione dei media interrompe la pagina in IE e Opera

Question

Ho un documento HTML5 che utilizza le query multimediali. Per soddisfare gli utenti di browser meno recenti stavo solo cercando di emulare il comportamento in JS e utilizzare modernizr 2.5.3 (il file che ho ricevuto dal download HTML5 Boilerplate ieri) per fare il mq-testing.

Un'altra cosa che mi piacerebbe fare è cambiare leggermente l'interfaccia utente se il client supporta gli eventi di tocco usando semplicemente Modernizr.touch.

faccio questo modo seguente:

//$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'); 

} 

Questo funziona bene in Webkit (mobile e desktop) e Firefox, ma quando provo ad aprire la pagina in Opera (11.6) o Internet Explorer (7 a 9) si scatena l'inferno. Gli eventi spareranno un numero casuale di volte, le animazioni jQuery si fermeranno a metà strada, per essere sinceri non ho idea di cosa potrebbe accadere (nessun errore di console però). Quando rimuovo lo script modernizr all'inizio della mia pagina, funziona perfettamente (tranne che per il rilevamento delle funzioni, ovviamente ...).

Quello che sto anche facendo sta usando il html5shiv (sto caricando questo dopo il Modernizr, ma ancora in testa) come:

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

avevo il sospetto che questo è il colpevole in il caso IE si rompe, ma poiché questo non dovrebbe avere alcun effetto sul comportamento di Opera, sono un po 'incapace.

Sto facendo qualcosa di sbagliato o si tratta di una specie di bug e dovrei cercare un altro modo per eseguire il rilevamento delle funzioni?

EDIT:

Mentre sto cercando di scoprire che cosa sta succedendo ho scoperto quanto segue: Quello che sembra essere radice di ogni male è solo la prova di media query: Modernizr.mq('only all and (min-width: 575px)'). Non appena si chiamano le cose impazziscono. Posso inserire questo nella console e otterrò il risultato giusto, ma sembra spezzare qualcosa in qualche modo strano. Inoltre, posso rompere una pagina in esecuzione (che non l'ha chiamata prima) chiamandola dalla console.

EDIT No. 2:

Durante la ricerca di un modo alternativo di gestire i test caratteristica che ho trovato this library sopra a Dev.Opera che (wow!) Sembra funzionare bene in Opera. Eppure non funziona in IE (Webkit e Firefox vanno bene) in quanto si lamenta:

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

Meh.

EDIT No. 3:

Così ho appena declassato a Modernizr 2.0.6 e le cose stanno funzionando bene in tutti i browser oggi. Anche se non sono ancora sicuro se questo è un bug o sto facendo qualcosa di sbagliato, quindi preferisco aspettare un po 'di tempo prima di rispondere a me stesso.

Answer 1

Ok, ho provato tutto il possibile per farlo funzionare. Mi sono assicurato di avere l'ultima versione di Modernizr, ho isolato tutto il mio js e ho lasciato solo il minimo indispensabile sulla pagina, ancora niente funziona.

Come ultima risorsa ho guardato attraverso il codice sorgente di Modernizr. Nel metodo mq, un altro progetto è citato matchMedia. Il MatchMediaproject è di uno dei contributori di Modernizr, Paul Irish. In effetti, Modernizr chiamerà MediaMatch se già esiste nella pagina al posto del proprio test Media Query. Così ho scaricato matchMedia.js e l'ho aggiunto al mio progetto e questo ha risolto il mio problema.

//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... 

È possibile ottenere matchMedia.js qui, https://github.com/paulirish/matchMedia.js

Aggiornamento: ho rigenerato una generazione personalizzata di 2.5.3 e funziona con fuori matchMedia.js.

Answer 2

Ho avuto un problema simile oggi con Opera Mobile 9.5. Probabilmente è causato dall'utilizzo dello stesso div per test di query su più supporti.il codice dello sviluppatore Opera utilizza gli ID casuali per testare domande dei media:

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

ma Modernizr è di routine Matchmedia polyfill utilizza lo stesso. Forse non viene rimosso all'interno di quei browser? Ho provato qualcosa di simile:

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");

Se mq() diventa vero, il resto sarà vero, troppo. Tuttavia forse è sbagliato ...

Grazie per il link a Opera!

Answer 3

Avevo lo stesso problema in IE 7 e 8. Quindi sono andato a scaricare nuovamente la libreria dalla pagina Github e il problema sembra essere risolto. Spero che modernizr.com sia presto aggiornato con il nuovo codice in modo da poter scaricare una build personalizzata.