7

在使用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 安全区域常量无能为力,因为……没有什么需要防范的。

在此处输入图像描述

4

0 回答 0