safe-area-inset 在哪些手机上真正生效
safe-area-inset 不是所有“全面屏”都认。它只在明确支持 CSS env() 安全区域环境变量的设备上起作用，目前主要是 iOS 11.2+（iPhone X 及之后）和部分 Android 10+ 厂商定制系统（如 Samsung One UI 2.0+、Pixel 原生 Android 10+）。但注意：很多国产安卓机即使有刘海/挖孔，env(safe-area-inset-top) 返回的仍是 0px —— 浏览器没透出这个值，CSS 就没法响应。
实操建议：
- 永远用
@supports (padding-top: env(safe-area-inset-top))包裹适配代码，避免降级设备误读 - 别依赖 UA 判断机型，iOS 和 Android 的内核行为差异大，且同一厂商不同系统版本支持度也不同
- 测试时优先用真机：Safari 技术预览版、iOS 真机调试；Android 建议连 Pixel 或三星 S21+ 实测，模拟器大概率不触发
如何用 env(safe-area-inset-*) 写安全区适配
核心不是“加圆角”，而是给内容留出屏幕物理遮挡区（刘海、挖孔、曲边）。圆角本身由系统控制，CSS 无法修改，但你可以让内容避开它。
常见错误现象：顶部导航栏被刘海盖住、底部 TabBar 被圆角裁切、滚动时内容滑进不可见区域。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 顶部留白：
padding-top: env(safe-area-inset-top, 0px)，其中0px是降级值，必须写 - 底部留白：
padding-bottom: env(safe-area-inset-bottom, 0px)，尤其对position: fixed; bottom: 0的组件关键 - 左右留白慎用：
env(safe-area-inset-left)和env(safe-area-inset-right)在多数设备上为0px，仅极少数曲面屏（如 iPhone 14 Pro）可能非零，不建议默认启用 - 不要直接改
border-radius去“模拟”圆角——那只是视觉欺骗，实际可点击区域仍会越界
为什么 padding + env() 比 margin 更可靠
用 margin-top: env(safe-area-inset-top) 看似省事，但容易引发布局断裂：margin 会脱离文档流，导致父容器高度计算异常，尤其在 flex / grid 容器中，子项可能被“挤出”可视区或重叠。
而 padding 是盒模型内部空间，不影响布局流，且能与 box-sizing: border-box 天然配合。
性能与兼容性影响：
-
env()是 CSS 运行时变量，无 JS 开销，但每次重排会重新求值，频繁 resize 下略高于普通 padding - 旧版 Safari 对
env()解析有缓存 bug：首次加载可能取不到值，刷新后才生效。所以务必搭配@supports和降级值 - 某些 WebView（如微信内置 X5）完全忽略
env()，需额外 JS 检测并注入 class 降级处理
圆角适配真正的难点不在 CSS
用户看到的“不同圆角”，本质是不同设备的安全区域形状不同：iPhone 是带弧度的矩形刘海，华为 Mate 系列是椭圆形挖孔，三星 S23 Ultra 是细长水滴+超大曲率侧边。但 safe-area-inset 只提供上下左右四个距离值，不描述形状。
这意味着：你无法用纯 CSS 判断“这里是不是曲边”，也无法动态生成匹配曲率的 border-radius。所谓“适配圆角”，99% 场景下只是确保内容不被裁切，而非视觉还原曲边效果。
容易被忽略的地方：
- 横屏时
safe-area-inset-left和safe-area-inset-right可能突然非零（如 iPhone 横屏下刘海变左/右边），但很多页面没监听orientationchange重算 - WebApp 添加到主屏幕后，部分 iOS 版本会关闭安全区检测，
env()回退为0px，需单独测试 PWA 模式 - 如果用了
viewport-fit=cover，必须同步加env()适配，否则等于主动把内容塞进刘海里
