html - vw on osx 上限为 1440px？

Question

今天，我注意到在我的分辨率为 1920 x 1080 的 Windows PC 上，具有 100vw 的网站按照您预期的方式呈现，body @ width: 1920px... 但是，切换到分辨率为 2880 x 1800 的 mac，即使 屏幕缩放设置为 100%，主体也仅在1440 像素？我在 Chrome、Firefox 和 Safari 上检查了这一点，所有这些都产生了相同的结果。

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

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

<content></content>

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

window
火狐:1920 x 971
Chrome:1920 x 974
IE11:2258.82 x 1158.82 嗯，好的 IE

操作系统
火狐 1440 x 794
Chrome:1440 x 799
Safari :1440 x 812

---

为什么会这样？

Answer 1

CSS 处理 css pixels ，而不是“物理像素”。 2x、3x、4x 分辨率显示器正确地声明它们有 2x、3x 和 4x 分辨率，但归根结底，为了不破坏整个网络，浏览器渲染引擎必须将物理像素转换为 CSS 像素，所以你的 2880 分辨率在 2x 显示器上只有 1440 CSS 像素。