Warum melden $(window).width() und CSS-Medienabfragen unterschiedliche Ansichtsfensterbreiten?

Inkonsistent gemessene Ansichtsfensterbreite zwischen $(window).width() und CSS-Medienabfragen

Bei Verwendung von $(window).width von jQuery () Um die Breite des Ansichtsfensters zu bestimmen, kann es zu Abweichungen von der durch CSS-Medienabfragen berechneten Breite kommen. Dieser Unterschied kann auf verschiedene Faktoren zurückgeführt werden, einschließlich der Breite der Bildlaufleiste des Browsers.

Um dieses Problem zu beheben, sollten Sie window.matchMedia() verwenden. Diese Methode liefert genaue Breitenberechnungen, die mit CSS-Medienabfragen konsistent sind. Es wird von allen modernen Browsern unterstützt und kann wie folgt implementiert werden:

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Alternative Lösung mit Modernizr:

Wenn die Browserkompatibilität ein Problem darstellt, können Sie es verwenden die von Modernizr bereitgestellte mq-Methode. Es unterstützt alle Browser, die Medienabfragen verstehen.

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

Beachten Sie, dass die Verwendung von $(window).innerWidth() zur Berechnung der Breite des Ansichtsfensters unter Berücksichtigung der Bildlaufleiste möglicherweise nicht immer die optimale Lösung ist Die Breite der Bildlaufleiste kann je nach Browser variieren.

Das obige ist der detaillierte Inhalt vonWarum melden $(window).width() und CSS-Medienabfragen unterschiedliche Ansichtsfensterbreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!