Javascript 如何确定css中安全区域插图-*的值

我有一个问题，我试着用各种方法解决，但都没有成功。我目前正在开发一个需要在多个设备上运行的PWA应用程序。到目前为止，它在所有设备上都能完美运行，直到我开始在iPhone模拟器上测试它。我发现屏幕底部的凹口和空间干扰了应用程序的设计。不久之后，我发现了env（安全插入区域底部/顶部/左侧/右侧）的强大功能，它允许我以一种简单的方式绕过这个问题。问题是，其中一个元素（底部的导航）要求与屏幕底部相比有一定的填充底部。在大多数设备上，这看起来还可以，但在IOS上，由于env（安全插入区底部）的额外填充，它大得令人恶心。因此，我尝试用各种方式删除IOS设备上的填充，我将在这里列出

第一次尝试

使用层叠样式

垫底：1.8rem

填充底部：env（安全插入区域底部）

未成功，因为安全插入区域底部在镀铬上的计算结果为0

第二次尝试

使用备用方案

填充底部：env（安全嵌入区域底部，1.8rem）

不成功，因为安全插入区域底部的计算结果再次为0

第三次尝试

如果有条件，则使用SCSS

.toolbar{@if env（安全插入区域底部）==0{填充底部： 1.8rem；}@else{填充底部：0}

我曾在不同的案例场景中尝试过这种方法：使用变量存储env变量并检查其条件，将if条件放入mixin，并将mixin包含在CSS类中

第四次尝试

我尝试使用以下CSS仅针对Safari移动设备

@支持（-webkit触摸标注：无）{ 填充底部：0；} @不支持（-webkit触摸标注：无）{ 填充底部：1.8rem；}

这也是不成功的

---

有人知道处理这个问题的简单方法吗？

尝试使用

max

---

垫底：1.8rem<代码>填充底部：最大值（环境（安全嵌入区域底部），1.8rem）

您需要在index.html中添加viewport fit=cover in viewport meta标记

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">