為什麼 $(window).width() 與媒體查詢斷點不同？

$(window).width() 與媒體查詢之間的視窗寬度差異

在使用Twitter Bootstrap 和自訂CSS 的專案中，視口寬度值之間會出現差異由$(window).width() 和媒體查詢決定。儘管在 767px 設定了媒體查詢斷點，$(window).width() 始終傳回一個小於 16px 的值，導致意外的 CSS 計算。

原因和解

主要原因這種差異是在 $(window).width() 計算中排除了滾動條寬度。為了解決這個問題，建議使用 $(window).innerWidth()，它包含滾動條寬度。但是，如果需要與媒體查詢斷點保持一致的行為，則此方法可能不適合。

1. window.matchMedia()（僅限現代瀏覽器）

如果您可以支援IE9 以外的現代瀏覽器，window.matchMedia()提供了一個無縫的解決方案。它與 CSS 媒體查詢完全一致，並確保 JavaScript 和 CSS 之間的一致性。

2. Modernizr 的 mq 方法

為了更廣泛的瀏覽器支持，Modernizr 的 mq 方法是一個可行的選擇。它為支援 CSS 媒體查詢的瀏覽器模擬 window.matchMedia() 的行為。

實作

實作 Modernizr 的 mq 方法：

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

以上是為什麼 $(window).width() 與媒體查詢斷點不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！