ios - 在 iPhone X 系列上处理 Chrome 浏览器中的安全区域
问题描述
对于我正在管理的网站,我正在使用新的处理 iPhone X 家庭屏幕安全区域safe-area-inset-<position>
,这在 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"]
?
推荐阅读
- arrays - 将数组分配给数组
- javascript - 一键实现两个动作 laravel
- python - Matplotlib 极坐标散点图不显示所有点
- sql - 在 SQL Server 中获取 0.00 十进制值
- wordpress - 如何在 Wordpress 中设置现有产品属性的值?
- c++ - 如何检查已经存在的#include 文件
- android - workmanager 定期请求在没有设置弹性周期的情况下不起作用
- typescript - 如何设置没有值的数字类型变量
- android - 在 Google Play 控制台上更新应用时出现错误
- substrate - 如何检查“墨水”的“储值”!在最新的“Polkadot/Substrate Portal”中