viewport-fit=cover 是 env() 生效的硬性前提，ios safari 仅在同时满足 width=device-width 和 initial-scale=1.0 时注入安全区变量；android chrome 基本不支持；@supports 必须检测属性声明如 padding-top: env(safe-area-inset-top)；fixed 元素需用 top/bottom 而非 padding 控制偏移；fallback 推荐 max(0px, env(...)) 或保守像素值。
viewport-fit=cover 是 env() 生效的硬性前提
不加这句 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，env(safe-area-inset-top) 在 iOS 上永远是 0px——不是“没生效”，而是系统压根不注入该值。iOS Safari 只在同时满足 width=device-width 和 initial-scale=1.0 时才启用安全区域变量。
常见陷阱：
- 微信 WebView、PWA 框架或某些 SDK 会用 JS 动态重写
<meta>，导致viewport-fit=cover实际丢失；真机调试时务必检查document.querySelector('meta[name=viewport]').content - Android Chrome（非 WebView）基本无视该属性，
env()值始终为unset或解析失败，别把它当跨平台方案 -
initial-scale=1.0不能省，漏掉它 iOS 就不会触发安全区计算
@supports 必须检测属性声明，不是函数本身
@supports (padding-top: env(safe-area-inset-top)) 是唯一合法写法。浏览器检测的是“这条 CSS 声明能否被识别并执行”，不是查 env() 函数是否存在。
错误写法会导致整块规则被跳过，毫无 fallback 可言：
-
@supports (env(safe-area-inset-top))—— 语法非法，整个@supports块被忽略 -
@supports (safe-area-inset-top: 44px)—— 这不是 CSS 属性，检测无效 -
@supports (background: env(safe-area-inset-top))—— 旧版 Safari 对非布局属性支持不稳定，慎用
正确结构示例：
@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
fixed 元素被遮挡？改 top/bottom，别碰 padding
padding-top: env(safe-area-inset-top) 对 position: fixed 的顶部导航栏完全无效——padding 是内容框内部空间，不影响定位基准点。
必须控制定位偏移：
- 顶部固定头：
top: env(safe-area-inset-top, 0px); top: 0;（层叠顺序兜底） - 底部 TabBar：
bottom: env(safe-area-inset-bottom, 0px); bottom: 0;，或更现代的inset: auto 0 env(safe-area-inset-bottom, 0px) 0; - 单位不能省：
env(safe-area-inset-bottom, 0)会报错；必须写0px - 如果用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住
fallback 值别设 0px，优先用 max() 封装
直接写 --safe-top: env(safe-area-inset-top, 0px) 风险高：不支持的环境里变量值为 unset，后续所有依赖它的 calc() 都会静默失效。
安全做法是用 max() 包一层：
:root {
--safe-top: max(0px, env(safe-area-inset-top, 0px));
--safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
header { padding-top: var(--safe-top); }
.tabbar { padding-bottom: var(--safe-bottom); }
fallback 值建议设为保守估计（如 20px 或 44px），直屏设备也适用，不会因刘海不存在而多出意外空白。
别在 height: 100vh 容器内叠加 padding-bottom：100vh 本身已包含手势条区域高度，再加会造成双倍留白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
