viewport-fit=cover是启用safe-area-inset-bottom的前提，必须添加；需同时声明constant()和env()回退，且env()在后；仅对fixed/absolute底部落位元素生效；安卓不支持该变量，应降级处理。
viewport-fit=cover 必须加，否则 safe-area-inset-bottom 不生效
不加这个，env(safe-area-inset-bottom) 在 iOS 上压根不会计算出值，底部固定元素照样被 Home Indicator 遮住。它不是可选项，是启用安全区变量的前提条件。
常见错误是只写了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，漏掉 viewport-fit=cover。正确写法必须是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：安卓 WebView 对 viewport-fit 支持较弱，但加了无害；iOS 11.0+ 才真正起作用；Safari、WKWebView、Chrome on iOS 均支持。
padding-bottom: env(safe-area-inset-bottom) 要配 constant() 回退
iOS 11.0–11.1 只认 constant(safe-area-inset-bottom)，11.2+ 才支持标准的 env()。只写一个，老版本直接失效。
必须同时声明，让浏览器按自身能力选择：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
- 顺序不能反：后写的会覆盖前写的，所以
env()放在后面 - 不能只用
env()：iPhone X（iOS 11.0）用户至今仍有存量 - 不能只用
constant()：iOS 15+ 已弃用，部分新系统可能警告或忽略
哪些元素需要加 safe-area-inset-bottom
不是所有底部元素都要加——只加那些 position: fixed 或 position: absolute 且 bottom: 0 的容器。比如：
-
.fixed-bottom-nav—— 底部导航栏 -
.floating-action-button—— 悬浮按钮（尤其带bottom: 20px这种偏移的） -
.sticky-footer—— 伪粘底区域（用 flex + margin-top: auto 实现的也需检查）
普通文档流中的 <footer></footer> 不需要加；用 min-height: 100vh + padding-bottom 布局的 body 也需要加，否则内容会被顶出视口外。
安卓设备要不要适配 safe-area-inset-bottom
绝大多数安卓机型（包括华为、小米、OPPO 等主流全面屏）不支持 safe-area-inset-bottom 这套 CSS 环境变量。它们用的是系统级导航栏高度（如 48px、64px），且无统一标准。
所以实际策略是：
- 保留
env()和constant()写法，对安卓无效但无副作用 - 对安卓做降级：用 JS 检测
window.visualViewport?.height 或 UA 字符串粗略判断，再手动注入 <code>padding-bottom: 48px - 更稳妥的做法：把底部操作区设计成「可滚动露出」，而非强依赖固定定位
真正容易被忽略的是：某些安卓 WebView（如微信内置 X5）会把导航栏高度透传为 env(safe-area-inset-bottom)，但行为不稳定——别依赖它，始终以 iOS 为准做主适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
