必须同时设置 viewport-fit=cover 和 env(safe-area-inset-*) 才生效；仅写 env() 无效，因 ios safari 仅在 meta 含 viewport-fit=cover 时注入该变量，否则返回 0px。
必须用 env(safe-area-inset-*)，但只写它一定失效——缺了 viewport-fit=cover，所有值都是 0px。
viewport-fit=cover 是前提，不是可选项
iOS Safari 只有在 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 完整存在时，才会注入 env() 变量。漏掉 viewport-fit=cover，或只写 initial-scale=1，env(safe-area-inset-bottom) 就永远返回 0px。
常见错误现象：
- 真机调试时
getComputedStyle(document.body).getPropertyValue('padding-bottom')读出来是0px - DevTools 模拟 iPhone X/12/14 全部正常，但真机上完全没反应
- 某些 WebView（如微信旧版、QQ 浏览器）根本不支持
viewport-fit，此时env()直接被忽略
padding-bottom 和 margin-bottom 不能混用
padding-bottom: env(safe-area-inset-bottom) 适用于容器类元素（比如 <main></main>、<footer></footer>），让内容自然“上浮”，避免被底部 Home Indicator 遮挡；margin-bottom: env(safe-area-inset-bottom) 只适合 position: fixed 的底部栏，且必须配合 calc() 才能控制离底边的净距离。
容易踩的坑：
- 对
position: fixed; bottom: 0的 tabbar 写margin-bottom: env(safe-area-inset-bottom)：会额外增加滚动高度，导致页面可滚动区域变大，手指一滑按钮就“掉出”视口 - 对普通块级元素写
margin-bottom：不改变父容器高度，视觉上留白但布局未撑开，可能引发其他元素错位 - 想让底部栏离屏幕底边固定 8px，写成
bottom: calc(8px + env(safe-area-inset-bottom))：Safari 15.4 之前不支持单位混合运算，整条声明会被丢弃
@supports 检测比 UA 判断更可靠
@supports (padding-bottom: env(safe-area-inset-bottom)) 是唯一推荐的检测方式。UA 字符串不可靠，iOS 版本号和 WebView 实现差异太大，微信、飞书、钉钉等容器对 viewport-fit 支持程度不一，靠 JS 判断容易漏判或误判。
实操建议：
- 降级必须写两遍，后写覆盖前写：
padding-bottom: 20px; padding-bottom: env(safe-area-inset-bottom); - 不要用
var(--safe-area-inset-bottom)替代env(safe-area-inset-bottom)：前者是自定义变量，后者是浏览器注入的环境变量，语义完全不同 - 安卓、桌面端、旧 iOS 会直接忽略
env()，所以 fallback 值必须合理（比如20px或0），不能影响非刘海设备显示
top / bottom / inset 适配要分场景选值
顶部 fixed 头部要用 top: env(safe-area-inset-top)，而不是 padding-top——因为 padding 不会把整个元素推下去，只是在内部加空隙，头部仍可能被刘海裁切。
绝对定位元素优先用 inset 简写：
header {
position: absolute;
inset: env(safe-area-inset-top) 0 auto 0;
}
这比分别写 top、right、bottom、left 更简洁，也更易维护。但注意：inset 在 Safari 15.2+ 才稳定支持，低版本需回退到单属性写法。
复杂点在于嵌套容器：如果父元素有 transform 或 overflow: hidden，iOS 15.4+ 中 env() 可能计算失准，临时加 will-change: scroll-position 可缓解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
