为什么 $(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中文网其他相关文章！