兼容问题---ios底部的安全距离css设置

绝世唐门三哥2024-07-12 18:51

在H5上适配安全区域： 采用viewport+env+constant方案。

具体操作如下：

需要将viewport设置为cover，env和constant才能生效。设置代码如下：

javascript 复制代码

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

同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。

这里不一定用padding-bottom可以是margin-bottom设置，具体看实际情况！

javascript 复制代码

@supports
(bottom: constant(safe-area-inset-bottom))
or (bottom: env(safe-area-inset-bottom)) {
.盒容器类名 {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}

注意事项：

有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。

所以我们在做屏幕适配时，需要这样写：

javascript 复制代码

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/