CSS媒体查询和Firefox的滚动条的宽度

可能重复：
issue with CSS media queries(scrollbar)CSS媒体查询和Firefox的滚动条的宽度

所以，火狐包括在其窗口宽度计算，在那里有Webkit的没有滚动条的宽度。这会导致浏览器之间的不一致。

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

有什么我可以做的，以防止Firefox包括滚动条宽度？也许是一个jQuery，将允许我的媒体查询跨浏览器正确触发？

谢谢。

2012-07-04 beefchimi

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

但是，如果您尝试将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 
}

希望这是有帮助的

2012-08-01 23:13:39

我想提一提，它并有所作为，因为如果你想隐藏一个介于400px - 768px之间的元素，直到您达到385px - 753px的范围时，它才会起作用。如果您在最大宽度768的基础上创建任何宽度百分比，那么15px也会失败。所以我会说它有所作为。 – pjdicke

回答