可能重复:
CSS 媒体查询问题(滚动条)
因此,Firefox 在其窗口宽度计算中包含了滚动条宽度,而 Webkit 则没有。这会导致浏览器之间的不一致。
现在,我知道从技术上讲,Firefox 通过计算滚动条作为窗口宽度的一部分来遵循规范,但这对我来说似乎真的违反直觉。毕竟,移动设备没有滚动条,滚动条宽度因浏览器而异/操作系统因操作系统而异。
我能做些什么来防止 Firefox 包含滚动条宽度吗?也许一个 jQuery 可以让我的媒体查询在浏览器中正确触发?
谢谢。
可能重复:
CSS 媒体查询问题(滚动条)
因此,Firefox 在其窗口宽度计算中包含了滚动条宽度,而 Webkit 则没有。这会导致浏览器之间的不一致。
现在,我知道从技术上讲,Firefox 通过计算滚动条作为窗口宽度的一部分来遵循规范,但这对我来说似乎真的违反直觉。毕竟,移动设备没有滚动条,滚动条宽度因浏览器而异/操作系统因操作系统而异。
我能做些什么来防止 Firefox 包含滚动条宽度吗?也许一个 jQuery 可以让我的媒体查询在浏览器中正确触发?
谢谢。
如果您只是使用媒体查询,那么侧边栏的偏移量不会在浏览器之间产生任何差异。
但是,如果您尝试将 jQuery 与媒体查询一起使用,您可能会遇到一些小问题,因为 jQuery 中返回的宽度是一致的,然后会显示偏移量。
要解决此问题,您只需计算 Firefox 浏览器中侧边栏的偏移量,然后从您想要同步的任何点减去该偏移量。IE
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
}
希望这有帮助