OSX Safari 提前 15 像素应用媒体查询
OSX Safari applying media query 15 pixels early
我有 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 像素不应该是这样 -
我能找到的唯一解决方法是编写一些特定于 safari 的 js - 这并不理想，但我唯一能想到的。
window.innerWidth是视口的宽度，即includes vertical scrollbars.
我的猜测是媒体查询是根据视口的宽度减去滚动条触发的，这将解释 18px 的差异。这比我能解释得更好：
我有 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 像素不应该是这样 -
我能找到的唯一解决方法是编写一些特定于 safari 的 js - 这并不理想，但我唯一能想到的。
window.innerWidth是视口的宽度，即includes vertical scrollbars.
我的猜测是媒体查询是根据视口的宽度减去滚动条触发的，这将解释 18px 的差异。这比我能解释得更好：