必须在meta中添加viewport-fit=cover，否则env(safe-area-inset-bottom)为0；需配合@supports检测和兜底值，安卓需用JS或Flexbox方案替代CSS。
viewport-fit=cover 必须加在 meta 里
不加这句，env(safe-area-inset-bottom) 就是 0，无论你怎么写 CSS 都没用。iOS 默认用 viewport-fit=contain，表面看按钮“没被遮”，其实是系统自动把它往上推了 20–30px，结果悬在黑条上方、用户点不到。正确写法只有一行：。注意：initial-scale=1.0 不能少，部分 iOS 版本会因此忽略 viewport-fit；也别写成 viewport-fit: cover（这是 CSS 语法，无效）；必须放在 最前面，避免被后续 meta 覆盖。
@supports 包裹 env() 才能降级
直接写 bottom: env(safe-area-inset-bottom)，老版 Safari 会整条规则忽略，按钮就掉到底边被黑条吞掉。必须用 @supports 做检测：
.submit-btn {
position: fixed;
bottom: 24px;
}
@supports (bottom: env(safe-area-inset-bottom)) {
.submit-btn {
bottom: env(safe-area-inset-bottom, 24px);
}
}
env(safe-area-inset-bottom, 24px) 里的 24px 是兜底值，不能写 0，否则老设备按钮紧贴屏幕底边，照样被遮。也别套 calc(24px + env())——iOS 15.4 之前不支持这种组合，直接失效。
安卓设备不能靠 env() 解决
Chrome 80+、UC、QQ 浏览器等完全不识别 env(safe-area-inset-bottom)，也不响应 keyboard-inset-bottom（仅 iOS 16.4+ 支持）。纯 CSS 在安卓上就是摆设。如果你的按钮在安卓键盘弹出时飞走或卡半空，不是你 CSS 写错了，是它根本没生效。得用 JS 监听 visualViewport 动态调整位置，或者改用 Flexbox 吸底方案（min-height: 100vh + flex: 1），避开视口单位缺陷。
fixed 定位在键盘弹出时大概率失效
哪怕 iOS 上 env() 生效了，position: fixed 本身在软键盘弹出时仍不可靠：Safari 会临时压缩视口高度但不重算 vh，导致按钮悬空；部分安卓浏览器甚至直接把 fixed 元素“冻结”在原位置。更稳的做法是放弃 fixed，用 Flexbox 把按钮逻辑归属表单末尾：form { display: flex; flex-direction: column; min-height: 100vh; } + .form-footer { flex-shrink: 0; }。视觉吸底、语义清晰、无障碍友好——而不仅仅是“看起来在下面”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
