osx 上的 vw 上限为 1440 像素？答案

【问题标题】：vw on osx capped at 1440px?osx 上的 vw 上限为 1440 像素？
【发布时间】：2017-10-04 07:59:30
【问题描述】：

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

我想我会创建一个 sn-p 来测试这个理论。

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

&lt;content&gt;&lt;/content&gt;

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

Windows
火狐：1920 x 971
铬：1920 x 974
IE11：2258.82 x 1158.82 嗯好的 IE

OSX
火狐1440 x 794
铬：1440 x 799
Safari：1440 x 812

为什么会这样？

【问题讨论】：

标签： html css macos

【解决方案1】：

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

【讨论】：

这是一个很棒的链接！感谢您的洞察力。

【解决方案2】：

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

【讨论】：

与 OSX 无关 - 它与 CSS 像素与物理像素有关。现在有 4x 的 android 手机，但为了保持向后兼容性，渲染引擎需要将物理像素转换为通常称为（无论如何 Web 开发人员）称为 CSS 像素的参考单位。在 android SDK 中，它们被称为与密度无关的像素 (dpi)。因此，2x、3x 或 4x 显示器都可以具有相同的 dpi 数