Chrome meta viewport-fit=cover 在带有显示切口的 android 上

Question

使用viewport-fit=cover. Safari 将内容全屏拉伸到切口区域，而 Chrome 则没有（请参见下面华为 Y6 的屏幕截图）这是 Android 上的标准行为还是向 Safari 之类行为的过渡阶段？

在 iPhoneX 上，下面的代码使内容边缘到边缘也延伸到切口区域。然后，您通过使用 CSS 安全区域常量来应用边距、填充等来补偿“吃”到实际内容中的缺口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
}
</style>

在 Adroid 9 Pie 上的最新 Chrome 上，凹口旁边的“角”区域（实际切口）始终是“安全的”，并且具有浏览器 chrome 的默认背景颜色（灰白色）或您在其中定义的任何颜色该<meta name="theme-color">标签。CSS 安全区常量什么都不做，因为...没有什么可以防范的。