為什麼 $(window).width() 與媒體查詢結果不同，如何修復？

$(window).width() 和媒體查詢結果之間的差異

當使用Twitter Bootstrap 和jQuery 操作基於視口的元素時width，您可能會遇到$(window).width() 傳回的結果與CSS媒體查詢中計算的寬度之間的差異。這種差異阻礙了響應行為的準確應用。

問題源自於 $(window).width() 計算中可能排除捲軸寬度。要解決此問題，一個建議的解決方案是使用 $(window).innerWidth()，它明確包含捲軸。

但是，對於與您的媒體查詢一致的綜合方法，請考慮使用以下替代方法：與 CSS 媒體查詢一致。

推薦解決方案：

1. window.matchMedia():

   • 如果不關心瀏覽器對IE9 的支持，請使用window .matchMedia()，與CSS媒體查詢完全對應。值得注意的是它的瀏覽器支援：https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • 為了與舊版瀏覽器相容，請使用Modernizr 的mq方法，該方法支援所有解釋媒體查詢的瀏覽器CSS。

透過合併這些解決方案，您可以確保 jQuery 程式碼中視窗寬度的計算和 CSS 媒體查詢無縫對齊。

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