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