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)";

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

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

更新 -

所以我解决了这个问题 - 新的 OSX safari 的媒体查询使用document.documentElement.clientWidth作为测量 - 而所有其他浏览器（以及我编写的同时启动 JavaScript 的代码）使用window.innerWidth

结果是 safari 因 css 加载的大小而变得混乱，而它不应该为 15 px -

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

Answer 1

window.innerWidth是视口的宽度，包括垂直滚动条。

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