ios - 在 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"]？