在 iPhone X 系列上处理 Chrome 浏览器中的安全区域

Question

对于我正在管理的网站，我正在使用新的safe-area-inset-<position> 处理 iPhone X 系列屏幕安全区域，这在 Safari 浏览器上运行良好，您可以在此处看到：

使用以下代码：

/* white container for the home bar that has an height only on devices that read the safe area to cover the transparency around that bar */
.ctc-container {
    background: $white;
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: env(safe-area-inset-bottom);
    z-index: 100;
}

/* chat and phone number container are positioned at the bottom of the safe area (for devices that read it) or at the bottom of the page */
.ctc-box {
    position: absolute;
    bottom: 0;
    bottom: env(safe-area-inset-bottom);
}

现在问题出在 Chrome 浏览器上，因为它显然还没有处理安全区域，所以聊天和电话号码框与 iPhone 主页栏重叠。

是否有任何 CSS 解决方案可以应用于 iPhone X 系列设备上的 Chrome 来处理安全区域？

Answer 1

您是否已将viewport-fit=cover 添加到您的meta[name="viewport"] 中？