ios h5底部或顶部偏移的根源是viewport-fit未设为cover且padding-bottom缺少fallback，而非安全区未适配；必须在meta中声明viewport-fit=cover，并为env(safe-area-inset-bottom)提供padding-bottom:0回退。
直接说结论：iOS H5 页面出现底部或顶部偏移，**不是「安全区没适配」，而是「viewport-fit 没生效 + padding-bottom 用错了时机或 fallback」**。单纯加 env(safe-area-inset-bottom) 不起作用是常态，尤其在微信内置浏览器、QQ 浏览器或 PWA 模式下。
为什么 env(safe-area-inset-bottom) 在 iOS H5 中经常失效
iOS Safari 要求页面必须显式声明 viewport-fit=cover，否则 env() 函数会返回 0px（而不是忽略）。uni-app 默认生成的 template.h5.html 里 viewport meta 缺少这个参数，导致所有安全区变量“形同虚设”。
-
viewport-fit=cover必须写在<meta name="viewport">中，且不能被其他插件或脚本覆盖 - 微信/手Q 内置浏览器对
viewport-fit支持不稳定，部分版本仅在display: standalone模式下才识别 -
constant()是旧版 iOS 的兼容写法，已废弃；只保留env()即可，但必须配合viewport-fit=cover - 如果父容器用了
position: fixed或transform，env()计算的 padding 可能被层叠上下文截断
pages.json 和 template.h5.html 必须改的两处
缺一不可，否则样式层根本收不到安全区值：
- 在
pages.json的"h5"节点下，确保"meta"包含：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
- 手动编辑项目根目录下的
template.h5.html（若不存在则新建），把默认的 meta 标签替换成上面那行 —— uni-app 构建时不会自动注入viewport-fit
padding-bottom 安全区写法要带 fallback
不能只写 env(safe-area-inset-bottom)，iOS 低版本或非 Safari 环境会直接解析失败，导致底部塌陷。正确写法是：
.safe-bottom {
padding-bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
}
注意：padding-bottom: 0 是关键 fallback，它确保即使 env() 不生效，也不会意外撑高容器；不要写成 padding-bottom: 20px 这类固定值。
- 该 class 必须加在「实际承载内容的最外层容器」上，比如
<page></page>或<view class="safe-bottom"></view>，不能只加在按钮或 tabbar 上 - 如果用了
scroll-view，它的父容器也要加safe-bottom，否则滚动区域仍会盖住 Home Indicator - 避免在同一个元素上同时用
env(safe-area-inset-bottom)和vh单位，iOS Safari 对两者动态计算不同步，容易叠加偏移
真机测试时还偏移？检查这三点
很多问题出在运行时环境，而非代码本身：
- 在微信中打开 H5，先确认是否跳转到了「全屏模式」：地址栏消失、右上角无菜单 —— 否则
viewport-fit=cover不触发 - 用
uni.getSystemInfoSync().platform === 'ios'判断平台，但 H5 下getSystemInfoSync()返回的platform是undefined或'web'，应改用/(iPhone|iPad|iPod)/i.test(navigator.userAgent) - 某些 iOS 版本（如 16.4）在 PWA 添加到主屏幕后，
env(safe-area-inset-bottom)值为0，此时需 JS 动态 fallback：document.documentElement.style.paddingBottom = '34px'（Home Indicator 高度经验值）
安全区偏移最麻烦的地方在于：它不报错、不警告，只是“看起来差一点”。一旦漏掉 viewport-fit=cover 或 fallback，真机上就永远差那 20–34px，而且只在 iOS 出现。
