对于我管理的网站,我正在使用新的 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来处理安全区域?
最佳答案
您是否已将 viewport-fit=cover
添加到您的 meta[name="viewport"]
?
关于ios - 在 iPhone X 系列上处理 Chrome 浏览器中的安全区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56243315/