在iPhone X系列的Chrome浏览器中处理安全区域 [英] Handle the safe area in Chrome browser on the iPhone X family

问题描述

对于我正在管理的网站，我正在使用新的 safe-area-inset-< position> 处理iPhone X系列屏幕的安全区域，并且在Safari浏览器上可以正常工作，因为您可以在这里看到:

For the website that I am managing, I am handling the iPhone X family screen safe area using the new safe-area-inset-<position> and this is working fine on Safari browser as you can see here:

使用以下代码:

/* 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主页栏覆盖了.

Now the problem is on Chrome browser because apparently it is not handling the safe area yet, so the chat and phone number box is overlapped by the iPhone home bar.

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

Is there any CSS solution that can be applied for Chrome on iPhone X family devices to handle the safe area?

推荐答案

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

Have you added viewport-fit=cover to your meta[name="viewport"]?

这篇关于在iPhone X系列的Chrome浏览器中处理安全区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！