Warum unterscheidet sich $(window).width() von Medienabfrage-Haltepunkten?

Diskrepanz bei der Fensterbreite zwischen $(window).width() und Medienabfragen

In einem Projekt, das Twitter Bootstrap und benutzerdefiniertes CSS verwendet, treten Diskrepanzen zwischen den Werten für die Breite des Ansichtsfensters auf bestimmt durch $(window).width() und Medienabfragen. Obwohl ein Medienabfrage-Haltepunkt auf 767 Pixel festgelegt wurde, gibt $(window).width() durchweg einen um 16 Pixel niedrigeren Wert zurück, was zu einer unerwarteten CSS-Berechnung führt.

Ursachen und Lösungen

Der Hauptgrund dafür Diese Diskrepanz ist auf den Ausschluss der Breite der Bildlaufleiste bei der Berechnung von $(window).width() zurückzuführen. Um dies zu berücksichtigen, wird empfohlen, $(window).innerWidth() zu verwenden, das die Breite der Bildlaufleiste berücksichtigt. Dieser Ansatz ist jedoch möglicherweise nicht geeignet, wenn ein konsistentes Verhalten mit dem Medienabfrage-Haltepunkt gewünscht wird.

1. window.matchMedia() (nur moderne Browser)

Wenn Sie moderne Browser außer IE9 unterstützen können, bietet window.matchMedia() eine nahtlose Lösung. Es ist vollständig auf CSS-Medienabfragen abgestimmt und gewährleistet die Konsistenz zwischen JavaScript und CSS.

2. Die mq-Methode von Modernizr

Für eine breitere Browserunterstützung ist die mq-Methode von Modernizr eine praktikable Option. Es emuliert das Verhalten von window.matchMedia() für Browser, die CSS-Medienabfragen verstehen.

Implementierung

So implementieren Sie die mq-Methode von Modernizr:

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

Das obige ist der detaillierte Inhalt vonWarum unterscheidet sich $(window).width() von Medienabfrage-Haltepunkten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!