css - OSX Safari 提前 15 像素应用媒体查询

Question

我有 2 个媒体查询大小 -

only screen and (min-width: 980px)and (max-width: 1499px)";

only screen and (min-width: 768px)and (max-width: 979px)";

当 window.innerwidth 介于 980 - 995 之间时，Safari 正在应用第二个媒体查询，而浏览器宽度仍在第一个媒体查询的范围内。

我以前从未见过这个 - 有什么想法吗？

更新-

所以我弄清楚了这个问题 - 新的 OSX safari 的媒体查询使用 document.documentElement.clientWidth 作为测量 - 而所有其他浏览器(以及我编写的代码让 javascript 启动同时)使用 window.innerWidth

结果是 safari 因 15 像素不应该加载的 css 加载而变得困惑 -

我能找到的唯一解决方法是编写一些特定于 safari 的 js - 这并不理想，但我唯一能想到的。

Answer 1

window.innerWidth 是视口(viewport)的宽度，includes vertical scrollbars .

我的猜测是媒体查询是根据视口(viewport)的宽度减去滚动条触发的，这将解释 18px 的差异。这比我能更好地解释它:

http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/