env(safe-area-inset-bottom)必须直接作用于fixed弹窗自身，通过inset或bottom设置，并配以viewport-fit=cover meta和带属性的@supports检测，fallback值须带单位；Android Chrome基本不支持，constant()已废弃。
env(safe-area-inset-bottom)必须作用于弹窗自身，而非父容器
给 body 或外层 wrapper 加 padding-bottom: env(safe-area-inset-bottom) 对 fixed 弹窗完全无效——弹窗脱离文档流，父级 padding 不会推它。真正起效的是直接控制弹窗的定位偏移。
- 错误写法：
.modal { position: fixed; bottom: 0; }+body { padding-bottom: env(safe-area-inset-bottom); } - 正确写法：
.modal { position: fixed; inset: auto 0 env(safe-area-inset-bottom) 0; }或bottom: env(safe-area-inset-bottom, 0px); - 注意单位不能省：
env(safe-area-inset-bottom, 0)是非法值，浏览器会忽略整条声明 - 如果弹窗有
z-index，确保它高于系统 UI（如 Safari 地址栏），否则仍可能被遮盖
@supports 检测必须带属性声明，不能只写函数名
@supports (env(safe-area-inset-bottom)) 是语法错误，整段 CSS 规则会被浏览器跳过。检测必须把 env() 放进具体属性中，让浏览器能解析出“是否支持该属性值”。
- ✅ 正确：
@supports (padding-bottom: env(safe-area-inset-bottom)) { .modal { bottom: env(safe-area-inset-bottom, 0px); } } - ❌ 错误：
@supports (env(safe-area-inset-bottom)) { ... }（无效语法，规则不生效） - 别用
calc()包裹env()做运算：calc(env(safe-area-inset-bottom) * 2)在所有已知浏览器中都不支持 - fallback 值建议保守：用
20px或44px，别用0px，否则老设备上弹窗底部可能紧贴屏幕边缘被裁切
viewport-fit=cover 是 env() 生效的硬性前提
没有这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env(safe-area-inset-*) 在 iOS Safari 和 iOS Chrome 中一律返回 0px。这不是兼容问题，是机制缺失。
- 该
meta必须存在且未被 JS 动态覆盖（PWA 或某些 UI 框架会重写 viewport） - Android Chrome（非 WebView）即使加了该 meta，
env()也基本不识别，别把它当跨平台方案用 - 横屏时
env(safe-area-inset-bottom)可能变为0px（如 iPhone 竖屏有 Home Indicator，横屏无），样式需自然响应，无需额外监听 - 开发调试时，真机 Safari 的开发者工具 → Elements → 计算样式里搜
safe-area-inset-bottom，有值才说明环境就绪
fixed 弹窗顶部也要适配 safe-area-inset-top
顶部弹窗（如 toast、通知栏）同样会被状态栏遮挡。仅处理底部是常见疏漏，尤其在全屏 PWA 或隐藏地址栏场景下，env(safe-area-inset-top) 值可能动态变大。
立即学习“前端免费学习笔记（深入）”；
- 顶部弹窗应设：
top: env(safe-area-inset-top, 0px);，而不是top: 0; - 若弹窗内容需“视觉上顶到最顶”，可用负 margin 补偿，但慎用：
margin-top: calc(-1 * env(safe-area-inset-top, 0px)); - 不要混用
constant()和env()：constant()已被 Safari 15+ 彻底移除，留着只会增加维护成本 - 四个变量必须分别使用：
env(safe-area-inset-top)、env(safe-area-inset-bottom)等不能合并或简写
实际项目里最容易被忽略的，是 viewport-fit=cover 被第三方 SDK 或 PWA 插件悄悄覆盖，以及 fallback 值漏写单位导致整条样式失效。这两点一出，弹窗遮挡问题就会在真机上反复复现，而桌面模拟器永远看不出异常。
