CSS媒体查询和Firefox的滚动条宽度[重复]

Posted 2023-03-06

【中文标题】CSS媒体查询和Firefox的滚动条宽度[重复]

【英文标题】：CSS Media Queries and Firefox's Scrollbar Width [duplicate]

【发布时间】：2012-07-05 03:30:56

【问题描述】：

可能重复：issue with CSS media queries(scrollbar)

因此，Firefox 在其窗口宽度计算中包含了滚动条宽度，而 Webkit 则没有。这会导致浏览器之间的不一致。

现在，我知道从技术上讲，Firefox 遵循规范，将滚动条计算为窗口宽度的一部分，但这对我来说似乎真的违反直觉。毕竟，移动设备没有滚动条，滚动条宽度因浏览器而异/操作系统因操作系统而异。

我可以做些什么来阻止 Firefox 包含滚动条宽度？也许一个 jQuery 可以让我的媒体查询在浏览器中正确触发？

谢谢。

【参考方案1】：

如果您只是使用媒体查询，那么侧边栏的偏移量不会在浏览器之间产生任何差异。

但是，如果您尝试将 jQuery 与媒体查询一起使用，您可能会遇到一些小问题，因为 jQuery 中返回的宽度是一致的，然后会显示偏移量。

要解决此问题，您只需计算 Firefox 浏览器中侧边栏的偏移量，然后从您想要同步的任何点减去该偏移量。即

var scrollBarWidth = 0;
if ($.browser.mozilla)
  scrollBarWidth = window.innerWidth - jQuery("body").width();

然后在您指定同步时...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) 
  //act to do along with the media query

希望对你有帮助

【讨论】：

我想提一下，它确实会产生影响，因为如果你试图隐藏 400px - 768px 范围内的元素，它实际上将无法工作，直到你达到 385px - 753px 范围。如果您将任何宽度百分比基于最大宽度 768，那么 15px 也会失败。所以我会说它有所作为。