為什麼 $(window).width() 和 CSS 媒體查詢報告不同的視窗寬度？

$(window).width() 和CSS 媒體查詢之間測量的視口寬度不一致

使用jQuery 的$(window ).width 時() 來決定視口的寬度，您可能會遇到與CSS 媒體查詢計算的寬度有差異的情況。這種差異可以歸因於多種因素，包括瀏覽器滾動條的寬度。

要解決此問題，請考慮使用 window.matchMedia()。此方法提供與 CSS 媒體查詢一致的準確寬度計算。所有現代瀏覽器都支援它，並且可以如下實現：

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

使用Modernizr 的替代解決方案：

如果瀏覽器相容性是一個問題，您可以使用Modernizr提供的mq方法。它支援所有理解媒體查詢的瀏覽器。

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

請注意，使用$(window).innerWidth() 計算視口寬度，同時考慮滾動條，可能並不總是最佳解決方案，因為滾動條寬度可能因瀏覽器而異。

以上是為什麼 $(window).width() 和 CSS 媒體查詢報告不同的視窗寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！