Question

今天我注意到我的Windows PC上的分辨率为1920 x 1080，100vw的网站正如您所期望的那样渲染，身体@ width: 1920px ...但是，交换到分辨率为2880 x 1800的mac，即使屏幕缩放设置为100％，正文仅在1440px呈现？我在Chrome，Firefox和Safari中检查了这一点，所有这些都会产生相同的结果。

我以为我会创建一个片段来测试这个理论。

＆＃13;

body{ overflow:hidden }
content{
  display: block;
  width: 100vw;
  height: 100vh;
}

＆＃13;

<content></content>

＆＃13;

内容分辨率的结果（以像素为单位）（w x h）...
请注意，100vh永远不会等于屏幕分辨率高度。

窗
Firefox：1920 x 971
Chrome：1920 x 974
IE11：2258.82 x 1158.82嗯ok IE

OSX
Firefox 1440 x 794
Chrome：1440 x 799
Safari：1440 x 812

<小时/> 为什么会这样？

Answer 1

CSS处理css pixels，而不是“物理像素”。 2x，3x，4x分辨率显示它们具有2x，3x和4x分辨率，但是当它归结为它时，为了不打破整个网络，浏览器渲染引擎必须将物理像素转换为CSS像素，因此，2x显示器上的2880分辨率只有1440个CSS像素。

Answer 2

在具有视网膜显示的OSX上，显示缩放设置默认设置为1440 x 900。因此，即使 true 显示分辨率为2880 x 1800，也不会是活动视口尺寸。这个问题/＆＃39;功能＆＃39;适用于所有OSX应用程序，不仅适用于浏览器/网页。

osx的上限是1440px吗？

2 个答案: