OSX的Safari施加媒体查询15个像素早

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

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

Safari浏览器被施加所述第二媒体查询而浏览器的宽度仍然是在上述第一范围one - window.innerwidth在980 - 995之间。

我从来没有见过这个 - 任何想法？

更新 -

所以我想通了这个问题 - 新的OSX Safari的媒体查询使用document.documentElement.clientWidth作为测量 - 而所有其他浏览器（和我所编码到在同时的javascript踢）使用window.innerWidth

结果野生动物园越来越混乱通过有规模的CSS加载它不应该为15像素 -

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

来源

2015-10-22 Scott Schweigert

所以我已经确定的OSX Safari浏览器使用document.documentElement.clientWidth三围为媒体而铬/ Firefox的使用.innerWidth查询 - 因此15像素的差距 –

这都是关于滚动条的。 – Sparky

那么我需要为safari制作二级CSS？我有JavaScript的依靠时，媒体查询是从事 - –

window.innerWidth是视口的宽度，其中includes vertical scrollbars。

我的猜测是媒体查询触发基于视口的宽度减去滚动条，这将占18px的差异。这说明它比我好的人：

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

来源

2015-10-22 20:14:37 willanderson

所以我发现了差异 console.log（“内部宽度：”+ window.innerWidth）; console.log（“doc client：”+ document.documentElement.clientWidth）; chromes媒体查询的跟随内部宽度，而safari做客户端的宽度。 –

OSX的Safari施加媒体查询15个像素早

回答

相关问题