viewport-fit=cover必须写在viewport meta中且完整，否则env()返回0px；@supports需用具体属性声明如padding-top: env()；fixed元素需用top/bottom/inset而非padding；图片圆角需父容器overflow:hidden。
viewport-fit=cover 必须写对，否则 env() 全是 0px
不加 viewport-fit=cover，env(safe-area-inset-top) 在 iOS 上恒为 0px——不是“没生效”，是系统压根不注入值。必须用完整 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，漏掉 initial-scale=1.0 或被 JS 动态重写（比如微信 X5、PWA 框架）都会导致失效。真机调试时，直接在 Safari 控制台执行 getComputedStyle(document.body).getPropertyValue('padding-top')，看返回是否含非零 px 值。
@supports 语法错一个字符，整块 CSS 就被跳过
@supports (padding-top: env(safe-area-inset-top)) 是唯一合法写法。浏览器检测的是“该属性声明能否被识别执行”，不是查函数是否存在。
- ❌
@supports (env(safe-area-inset-top))：语法非法，整个@supports块被忽略 - ❌
@supports (safe-area-inset-top: 44px)：这不是 CSS 属性，检测无效 - ✅ 把
env()放进具体属性声明里，例如@supports (padding-bottom: env(safe-area-inset-bottom)) - 别混用
background或transform等非布局属性——旧版 Safari 对它们的env()支持不稳定
fixed 元素被遮挡？padding 不起作用，得改 top / bottom / inset
padding-top: env(safe-area-inset-top) 对 position: fixed 元素完全无效，因为 padding 是内容框内部空间，不影响定位基准点。
- 顶部固定头：写成
top: 0; top: env(safe-area-inset-top);（层叠顺序兜底） - 底部 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)会报错；正确 fallback 是env(safe-area-inset-bottom, 0px) - 如果用了
z-index，确保该元素层级高于系统 UI（如 Safari 地址栏），否则仍可能被盖住
图片圆角在 iOS Safari 失效？问题不在 border-radius 本身
直接给 <img> 加 border-radius 在 iOS Safari 上大概率无效，不是代码错了，是 WebKit 主动跳过硬件加速元素的裁剪逻辑。
- ✅ 正确做法：父容器设明确宽高 +
overflow: hidden+border-radius，再让<img>填满它 - ❌ 错误组合：父容器用
flex: 1、transform、will-change，或未设宽高，都会触发裁剪绕过 - 替代方案
clip-path: circle(50% at 50% 50%)动画更顺，但只推荐用于iOS ≥ 15.5+Chrome ≥ 100环境 - 注意：Safari 私有 layer 树、subpixel 渲染、图片加载时机都可能影响最终圆角呈现
env() 或 border-radius，而是确保视口元信息没被第三方 SDK 覆盖、@supports 声明没拼错、fixed 元素的定位上下文没被意外干扰——这些点一旦漏掉，真机上就只剩白屏或错位，连报错都不会有。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
