modernizr 2.5.3 Media Query Tests bricht Seite in IE und Opera

Question

Ich habe ein HTML5-Dokument, das Medienabfragen verwendet. Um den Benutzern älterer Browser gerecht zu werden, habe ich gerade versucht, das Verhalten in JS zu emulieren und modernisierer 2.5.3 (die Datei, die ich gestern von der HTML5 Boilerplate heruntergeladen habe) zu verwenden, um die mq-testing zu tun.

Eine andere Sache, die ich tun möchte, ist die Benutzeroberfläche ein wenig zu ändern, wenn der Client Berührungsereignisse mit einfachen Modernizr.touch unterstützt.

Ich tue dies auf folgende Weise:

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

} 

Dies funktioniert gut in Webkit (mobile und Desktop) und Firefox, aber wenn ich versuche, die Seite in Opera zu öffnen (11.6) oder den Internet Explorer (7 zu 9) die Hölle bricht los. Ereignisse werden eine zufällige Anzahl von Zeit feuern, jQuery Animationen werden auf halbem Weg stoppen, um ehrlich zu sein, habe ich keine Ahnung, was passieren könnte (keine Konsolenfehler obwohl). Wenn ich das modernisier Skript im Kopf meiner Seite entferne, funktioniert es gut (außer für die Feature-Erkennung natürlich ...).

Was ich auch tue, wird mit den html5shiv (Ich lade diese nach der modernizr, aber immer noch im Kopf) wie:

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

Ich würde vermuten, dass diesen der Täter sein, in Fall IE bricht, aber da dies auf Operas Verhalten keinen Einfluss haben sollte, bin ich ein wenig ratlos.

Mache ich etwas falsch oder ist das eine Art Bug und ich sollte nach einer anderen Möglichkeit suchen, meine Feature-Erkennung durchzuführen?

EDIT:

Während ich um herauszufinden versuche, was ich folgendes herausgefunden geschieht: Was Wurzel allen Übels zu sein scheint, ist nur die Medienabfrage Test: Modernizr.mq('only all and (min-width: 575px)'). Sobald das heißt, werden die Dinge verrückt. Ich kann das in die Konsole schreiben und werde das richtige Ergebnis bekommen, aber es scheint auf eine seltsame Weise etwas zu kaputt zu machen. Außerdem kann ich eine laufende Seite (die das vorher noch nicht aufgerufen hat) durch einen Aufruf von der Konsole aus unterbrechen.

EDIT No. 2:

Während für eine alternative Art und Weise der Suche der Funktion Test zu handhaben ich this library über bei Dev.Opera festgestellt, dass (wow!) Scheint in Opera zu funktionieren. Aber es funktioniert nicht in IE (Webkit und Firefox sind in Ordnung), wie es beschwert über:

Meh.

EDIT No. 3:

Also ich herabgestuft nur 2.0.6 Modernizr und Dinge arbeiten jetzt in allen Browsern gut. Obwohl ich mir immer noch nicht sicher bin, ob das ein Fehler ist oder ich etwas falsch mache, werde ich lieber etwas warten, bevor ich das selbst beantworte.

Answer 1

Ok, ich habe alles versucht, um das zu erreichen. Ich stellte sicher, dass ich die neueste Version von Modernizr hatte, isolierte ich alle meine js und ließ nur das Nötigste auf der Seite, immer noch funktioniert nichts.

Als letzten Ausweg habe ich den Quellcode von Modernizr durchgesehen. In der Methode mq wird ein anderes Projekt als matchMedia zitiert. Das MatchMediaproject stammt von Paul Irish, einem der Mitarbeiter von Modernizr. In der Tat ruft Modernizr mediaMatch auf, wenn es bereits auf der Seite anstelle eines eigenen Medienabfrage-Tests existiert. Also lud ich matchMedia.js herunter und fügte es meinem Projekt hinzu und das behob mein Problem.

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

Sie matchMedia.js hier erhalten können, https://github.com/paulirish/matchMedia.js

Update: ich eine benutzerdefinierte Version von 2.5.3 regeneriert und es funktioniert mit aus matchMedia.js.

Answer 2

Ich hatte heute ein ähnliches Problem mit Opera Mobile 9.5. Wahrscheinlich wird dies durch die Verwendung des gleichen Div für mehrere Medienabfragetests verursacht.Der Code des Opera-Entwickler verwendet Zufalls ids Medien-Anfragen zu testen:

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

aber modernizr ist Routine Matchmedia polyfill das gleiche verwendet. Vielleicht wird es nicht in diesen Browsern entfernt? Ich habe so etwas wie dies versucht:

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

Wenn mq() wahr wird, wird der Rest wahr sein, auch. Trotzdem ist es vielleicht falsch ...

Danke für den Link zu Opera!

Answer 3

Ich bekam das gleiche Problem in IE 7 und 8. Also ging ich und wieder die Bibliothek von der Github-Seite heruntergeladen und das Problem scheint behoben zu sein. Ich hoffe, dass modernisz.com bald mit dem neuen Code aktualisiert wird, damit ich einen benutzerdefinierten Build herunterladen kann.