uniapp 开发H5中适配底部安全区域不生效的解决方法

时间:2025-04-05 11:34:33

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

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

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

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

需要注意如下几点:

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