必须提供fallback且顺序为fallback在前、env()在后，否则解析失败导致遮挡；仅作用于固定导航的直接父容器，禁用body；用@supports(-webkit-touch-callout:none)检测最可靠。
env(safe-area-inset-*)必须配fallback，否则解析失败直接遮挡
写 padding-bottom: env(safe-area-inset-bottom) 单独一行，等于没写——浏览器遇到无法识别的值会丢弃整条声明，退回到默认 padding-bottom: 0，底部内容立刻被 Home Indicator 遮住。
正确做法是显式提供 fallback：
-
padding-bottom: 34px—— 兼容不支持 env() 的旧 WebView 或桌面端 -
padding-bottom: env(safe-area-inset-bottom)—— 覆盖上一行，仅在支持设备生效
注意顺序不能反：CSS 层叠规则要求 fallback 在前、env() 在后，否则 fallback 永远不会生效。
只对固定定位的导航容器设 padding，别碰 body
给 body 加 padding-top: env(safe-area-inset-top) 看似省事，但会导致所有页面内容整体下移，和 position: fixed 头部重叠、z-index 错乱，甚至让 sticky 页脚失效。
真正该加的位置是导航/头部的**直接父容器**：
- 顶部固定栏：给
.header或.nav-fixed加padding-top - 底部固定栏：给
.footer或.bottom-nav加padding-bottom - 容器本身需有
box-sizing: border-box，否则 padding 会撑大高度
如果父容器用了 overflow: hidden，用 padding 不影响滚动行为；margin 则可能把内容推到不可见区域。
@supports(-webkit-touch-callout:none) 是唯一靠谱检测方式
别用 @supports (padding-top: env(safe-area-inset-top)) —— Safari 常返回 false，导致样式块被跳过；也别依赖 UA 判断，微信、飞书等 WebView 的 UA 字符串早已不可信。
目前最稳定、被 iOS WebKit 实际使用的检测信号是：
-
@supports (-webkit-touch-callout: none)—— 只有 iOS Safari 和部分新版 Chrome/Edge 会匹配 - 这个条件在 Android、桌面 Chrome、旧版 Safari 中均不成立，天然隔离
- env() 声明必须严格包裹在该
@supports块内，外部定义的 CSS 变量（如--safe-top）不会自动继承，得在里面重新赋值
横竖屏切换时 env() 值突变，CSS 不会自动重算
iOS 在分屏、横竖屏切换、多任务窗口缩放时，env(safe-area-inset-top) 可能从 44px 突变为 0px 或 20px，但 CSS 不触发重排，页面仍按旧值渲染，造成短暂遮挡或留白过大。
真机测试时最容易漏掉这点。解决方案很轻量：
- 监听
resize事件（iOS 下该事件确实会在安全区变化时触发） - 手动切换一个 class，比如
document.documentElement.classList.toggle('safe-area-updated') - 这个 class 不需要带样式，只要触发一次强制重绘即可
别指望 scroll-margin-top: calc(1rem + env(safe-area-inset-top)) 自动响应变化——它只在初始计算时读取一次 env() 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
