fixed元素被刘海或手势条遮挡需改inset/top/bottom而非padding，且viewport-fit=cover和@supports(padding-top:env(safe-area-inset-top))缺一不可；env()值依赖meta激活，Android Chrome不支持，z-index需＞999。
直接结论：fixed元素被刘海或手势条遮挡，不是因为“没加padding”，而是它压根不响应padding——必须改定位偏移，且viewport-fit=cover和@supports检测缺一不可。
viewport-fit=cover 必须写对，否则env()恒为0px
所有env(safe-area-inset-*)值都依赖这个meta声明激活。漏掉、拼错、被JS覆盖，都会让变量返回0px，而不是“没生效”。
-
必须完整，viewport-fit=cover不能缩写、不能换位置 - 微信X5内核、部分PWA环境会动态重写meta，建议真机用Safari开发者工具运行
getComputedStyle(document.body).getPropertyValue('padding-top')验证是否读到非零值 - Android Chrome（非WebView）基本不识别该属性，别在Android上指望env()有值
fixed元素顶部/底部被遮，别碰padding，改inset或top/bottom
padding是给文档流内元素留白的，fixed脱离文档流，加padding-bottom: env(safe-area-inset-bottom)对它完全无效。
- 推荐用
inset一次性控制四边：inset: auto 0 env(safe-area-inset-bottom) 0（等价于top: auto; right: 0; bottom: env(safe-area-inset-bottom); left: 0） - 兼容老写法可叠加
bottom：bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); bottom: 0;，但注意constant()已在Safari 15+移除，仅需保留env()+ fallback - fallback单位不能省：
bottom: env(safe-area-inset-bottom, 0px)，写成0会失效
@supports检测必须合法，否则整块CSS被忽略
浏览器不是查“函数是否存在”，而是查“这条CSS声明能否被解析执行”。语法错一个字符，规则就丢弃。
- ✅ 正确：
@supports (padding-top: env(safe-area-inset-top)) { ... } - ❌ 错误：
@supports (env(safe-area-inset-top)) { ... }（语法非法，整块忽略） - ❌ 错误：
@supports (safe-area-inset-top: 44px) { ... }（这不是CSS属性） - 检测目标建议选布局相关属性（如
padding-top），避免用background等非布局属性，旧版Safari支持不稳定
z-index和视觉层级容易被忽略
即使定位偏移正确，如果z-index太低，fixed元素仍可能被Safari地址栏或系统UI盖住。
- 确保该元素
z-index大于999（地址栏通常在900–950区间） - 避免父容器设
overflow: hidden或clip-path，可能意外裁切fixed子元素 - 灵动岛机型（iPhone 14 Pro/15 Pro）在横屏时
safe-area-inset-top可能突变为0px，需结合@media (orientation: landscape)做微调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
