在 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 浏览器上，因为显然它还没有处理安全区域，所以聊天和 phone 号码框被 iPhone 主页栏重叠。

有没有什么CSS方案可以应用在iPhoneX系列设备上Chrome处理安全区？

Answer 1

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

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

Handle the safe area in Chrome browser on the iPhone X family

css

frontend

google-chrome

ios

iphone-x