CSS中env(safe-area-inset-bottom)不生效如何排查解决

复现代码 #

CSS 代码 #

* {
  padding: 0;
  margin: 0;
}

.testclass {
  background-color: green;
  padding-bottom: env(safe-area-inset-bottom);
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="testclass">Hello there</div>
  </body>
</html>

• 现有代码运行效果：效果截图1
• 固定设置padding-bottom: 50px的预期效果：效果截图2

基础场景问题已排查，仅在网站添加到设备主屏幕（全屏PWA模式）下env(safe-area-inset-bottom)失效，怀疑和Webpack配置有关。

基础兼容补全 #

首先补全缺失的配置和兼容写法：

1. viewport标签补充width=device-width属性，否则移动端视口计算逻辑异常，env值无法正确读取，正确写法：

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

2. 补全旧版iOS兼容语法，iOS 11.2之前用constant()而非env()，兼容写法：

.testclass {
  background-color: green;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

主屏幕/PWA模式失效的Webpack相关修复 #

这个场景下失效基本都是配置被构建工具覆盖导致，逐一排查：

1. 检查html-webpack-plugin配置
   该插件默认会自动生成viewport meta标签，会覆盖你在模板里手写的标签，而默认生成的viewport不带viewport-fit=cover属性，直接导致PWA模式下env值为0。
   直接在插件配置里显式声明meta，不要依赖手写：

   // webpack.config.js
   new HtmlWebpackPlugin({
     // 其余配置省略
     meta: {
       viewport: 'width=device-width,initial-scale=1,viewport-fit=cover'
     }
   })
   

2. 检查PWA manifest配置
   如果你的项目配置了Web App Manifest，把display字段从fullscreen改为standalone：iOS 对fullscreen模式的Web应用不会返回安全区域inset值，standalone模式下才能正常读取env变量。
3. 检查PostCSS配置
   如果你用了postcss-preset-env或CSS压缩插件，确认配置没有把env()函数做错误转译，可在插件配置里将env加入函数保留名单。

内容的提问来源于stack exchange，提问作者fer0n