做网站关于创新的百度免费安装

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

具体操作如下：

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

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

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

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

@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);
}
}

3. 注意事项：

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

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

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