应使用 bottom: 0; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom) 并确保 viewport 中含 viewport-fit=cover，否则 env() 返回 0px；@supports 需检测合法声明如 padding-bottom: env(...)，内联样式中 env() 无效，须写入 css 文件。
position: fixed 元素被底部小黑条遮挡怎么办
直接给 position: fixed 的底部元素（比如 TabBar、提交按钮）加 padding-bottom 是无效的——padding 只影响内部内容流，不改变 fixed 元素自身在视口中的位置。必须用 bottom 或 top 偏移来“抬高”它。
正确写法是利用层叠顺序 fallback：
-
bottom: 0（兜底，所有浏览器都认） -
bottom: constant(safe-area-inset-bottom)（iOS 11.0–11.1） -
bottom: env(safe-area-inset-bottom)（iOS 11.2+，必须排在 constant 后面）
示例：
footer {
position: fixed;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
为什么写了 env() 却没生效
最常见原因是 <meta name="viewport"> 缺了关键参数。系统只在 viewport-fit=cover 显式启用时，才向 CSS 注入 safe-area-inset-* 的值；否则所有 env() 返回 0px，不是“不支持”，是“没开开关”。
必须确保这行完整存在：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：initial-scale=1.0 不能省，iOS Safari 会因此拒绝启用 env()；viewport-fit=cover 也不能拼错或漏空格。
@supports 检测写错就等于没写
CSS 的 @supports 不是检测函数是否存在，而是检测某条声明是否被浏览器视为合法 CSS 值。写法错一个字符，整块规则都会被丢弃。
✅ 正确写法：
@supports (padding-bottom: env(safe-area-inset-bottom)) {
footer { padding-bottom: env(safe-area-inset-bottom); }
}
❌ 错误写法（以下任一都会让规则失效）：
-
@supports (env(safe-area-inset-bottom))（语法非法） -
@supports (safe-area-inset-bottom: 44px)（这不是 CSS 属性） -
@supports (padding-bottom: env(safe-area-inset-bottom) px)（单位写在括号外是非法值）
uni-app 里 style 绑定 env() 会失败
别在 Vue/React 的内联样式里写 style={{ bottom: 'env(safe-area-inset-bottom)' }}。JS 字符串不会被 CSS 引擎解析，env() 就当普通文本透传过去，最终计算值是 env(safe-area-inset-bottom) 字面量，不是动态数值。
解决方案只有两个：
- 把规则写进真实 CSS 文件（推荐），用 class 控制
- 用
<style></style>标签动态插入，但需确保插入时机在 DOM 渲染前，且避免 SSR 场景下服务端执行报错
另外，uni-app 的 manifest.json 中 app-plus.safearea.bottom.offset 配置仅影响原生渲染层，对 H5 和小程序无效——CSS 层适配必须独立处理。
真正容易被忽略的是：env() 在非全面屏设备（如 iPhone 8）上返回 0px，如果 fallback 值设成 0，会导致直屏设备多出意外空白；建议 fallback 至少设为 20px 或 44px，兼顾兼容与视觉一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
