如何修复iOS 14.5系统下CSS safe area设置不生效的问题

• 优先使用Ionic内置安全区变量
  Ionic 5 内置了适配全平台的安全区CSS变量，不会出现系统版本兼容性问题，替换原有CSS代码即可：

padding-bottom: var(--ion-safe-area-bottom) !important;

如果需要保留原生env作为兜底，可写为：

padding-bottom: var(--ion-safe-area-bottom, env(safe-area-inset-bottom)) !important;

• 补全多版本兼容写法
  部分iOS版本需要同时声明constant和env两个取值才能正确识别，修改CSS为：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom) !important;

• 升级WebView插件版本
  低于5.0.0版本的cordova-plugin-ionic-webview在iOS14.5+上存在安全区识别bug，升级插件到最新稳定版即可解决，同时检查config.xml中是否存在禁用安全区的配置，如有则删除：

<!-- 移除该配置 -->
<preference name="DisableSafeAreaInsets" value="true" />

• 确认状态栏配置
  如果使用了cordova-plugin-statusbar，必须开启状态栏覆盖WebView的配置，否则系统不会返回正确的安全区数值：

// 应用启动时执行
StatusBar.overlaysWebView(true);

• 排查全局样式冲突
  如果全局CSS给html、body设置了固定高度height: 100%或者overflow: hidden，会导致WebView无法正确计算视口高度，修改为：

html, body {
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
}

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