必须添加 viewport-fit=cover，否则 env(safe-area-inset-bottom) 在 ios safari 中恒为 0；正确 viewport 声明需同时包含 width=device-width、initial-scale=1.0、viewport-fit=cover。
viewport-fit=cover 必须加，否则 env() 恒为 0
env(safe-area-inset-bottom) 在 iOS Safari 中返回 0px 或完全不生效，90% 是因为漏了 viewport-fit=cover。iOS 只有在视口声明启用该模式后，才会注入安全区变量。缺了它，env() 就是空壳。
正确写法必须包含三项：width=device-width、initial-scale=1.0、viewport-fit=cover。少一个都不行：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=contain或没写，env()值永远是 0 - Chrome DevTools 的响应式调试不会模拟该行为，真机 Safari 或 WKWebView 才能验证
- 微信内置浏览器（非小程序）默认不启用
viewport-fit=cover，必须手动加
padding-bottom: env() 单独写会失效，必须用 calc() 托底
直接写 padding-bottom: env(safe-area-inset-bottom) 是危险操作：不支持 env() 的浏览器（如所有 Android Chrome、旧版 iOS）会整条声明丢弃，退回到上一个有效值（通常是 0），导致底部元素被遮挡。
推荐写法是强制 fallback 到一个基础值，靠 calc() 确保计算始终成立：
footer {<br> padding-bottom: calc(16px + env(safe-area-inset-bottom));<br>}
-
calc(16px + env(...))中，即使env()被忽略，结果仍是16px，底线不塌 - 不要写
env(safe-area-inset-bottom, 0px)—— 这个 fallback 语法仅部分浏览器支持，且不能解决声明丢弃问题 - 全局设在
body或html上会导致所有页面底部留白，应只作用于真正需要贴底的容器（如footer、.tab-bar）
@supports 检测比 UA 判断更可靠
不能靠 navigator.userAgent 判断是否为 iOS 设备，因为 WKWebView、PWA、微信、QQ 浏览器等环境行为不一致；也不能只查 webkit 前缀，iOS 15+ 已逐步移除。
唯一可靠的判断方式是 CSS 特性检测：
@supports (padding-bottom: env(safe-area-inset-bottom)) {<br> footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }<br>}
- 这个
@supports规则只在真正支持env()的环境里生效，天然过滤安卓和老 iOS - 搭配
max()写法（如padding-bottom: max(0px, env(safe-area-inset-bottom))）可作为补充兜底，但不如calc()稳定 - JavaScript 无法读取
env()值（getComputedStyle返回unset），别试图用 JS 动态获取
fixed 元素要用 bottom: calc()，别用 margin-bottom
如果你有一个 position: fixed; bottom: 0 的悬浮按钮，想让它“上移”避开 Home Indicator，margin-bottom: env(safe-area-inset-bottom) 是错的 —— 它会撑开父容器高度，导致可滚动区域变大，手指滑动时按钮可能突然“掉出视口”。
正确做法是调整定位基准：
.fab {<br> position: fixed;<br> bottom: calc(env(safe-area-inset-bottom) + 8px);<br> right: 16px;<br>}
-
bottom: calc(...)让元素真正“停在安全区上方”，不干扰布局流 - 容器类元素（
<main></main>、<footer></footer>）一律用padding，语义清晰且不影响滚动逻辑 - Android 设备完全不支持
env()，这部分样式会被@supports自动跳过，需另配媒体查询或 JS 降级方案
safe-area-inset-top 会实时变化，而 safe-area-inset-bottom 虽相对稳定，但不同横竖屏状态、系统版本下仍有差异。依赖固定像素值或一次性 JS 检测，都会在复杂场景下露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
