在适配底部安全区域时我们通常会使用如下方法
 

box-sizing: content-box;
padding-bottom: 0 !important;
padding-bottom: constant(safe-area-inset-bottom) !important;
padding-bottom: env(safe-area-inset-bottom) !important;

但是只是加上面的样式会发现并不起作用，经过查询资料发现，还需要在index.html文件中添加如下代码：
 

<meta name="viewport" viewport-fit=cover">

需要注意如下几点：

1. 当网页设置viewport-fit=cover的时候才生效（uniapp开发，小程序无需设置，默认viewport-fit=cover）
2. constant()和env()需要同时存在，顺序不能换。