Warum unterscheidet sich $(window).width() von den Ergebnissen der Medienabfrage und wie kann ich das Problem beheben?

Diskrepanz zwischen $(window).width() und Medienabfrageergebnissen

Bei Verwendung von Twitter Bootstrap und jQuery zum Bearbeiten von Elementen basierend auf dem Ansichtsfenster Breite kann es zu einer Diskrepanz zwischen den von $(window).width() zurückgegebenen Ergebnissen und der berechneten Breite in Ihrer CSS-Medienabfrage kommen. Dieser Unterschied behindert die genaue Anwendung von Reaktionsverhalten.

Das Problem ergibt sich aus dem möglichen Ausschluss der Bildlaufleistenbreite in $(window).width()-Berechnungen. Um dieses Problem zu beheben, besteht eine vorgeschlagene Lösung darin, $(window).innerWidth() zu verwenden, das die Bildlaufleiste explizit einschließt.

Für einen umfassenden Ansatz, der mit Ihrer Medienabfrage übereinstimmt, sollten Sie jedoch die Verwendung alternativer Methoden in Betracht ziehen konsistent mit CSS-Medienabfragen.

Empfohlen Lösungen:

1. window.matchMedia():

   • Wenn die Browserunterstützung für IE9 kein Problem darstellt, verwenden Sie Windows .matchMedia(), was vollständig den CSS-Medienabfragen entspricht. Bemerkenswert ist die Browserunterstützung: https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • Um die Kompatibilität mit älteren Browsern zu gewährleisten, verwenden Sie die mq-Methode von Modernizr, die alle Browser unterstützt, die Medienabfragen interpretieren CSS.

Durch die Integration dieser Lösungen können Sie sicherstellen, dass die Berechnungen der Ansichtsfensterbreite in Ihrem jQuery-Code und CSS-Medienabfragen nahtlos aufeinander abgestimmt sind.

Das obige ist der detaillierte Inhalt vonWarum unterscheidet sich $(window).width() von den Ergebnissen der Medienabfrage und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!