safe-area-inset 是 iOS 等设备提供的环境变量，需通过 env() 函数配合 padding/margin/inset 使用；必须声明 viewport-fit=cover 且建议加 fallback 值，仅 iOS 11+/部分安卓支持，应配合 @supports 检测并避免 JS 干预。
safe-area-inset 是什么，为什么不能直接写 padding: env(safe-area-inset-top)
它不是 CSS 属性，而是 env() 函数提供的环境变量，必须配合 padding、margin 或 inset 等盒模型属性一起用。直接写 padding: safe-area-inset-top 会完全失效——浏览器不认识这个值。
常见错误现象：padding: env(safe-area-inset-top) 只设置了上边距，左右下没跟上；或写了但真机上没反应，大概率是漏了 viewport meta 配置。
- 必须在
<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">中声明viewport-fit=cover，否则 iOS 不暴露这些变量 -
env()的 fallback 值强烈建议写上，比如env(safe-area-inset-top, 0px)，否则旧系统或安卓部分 WebView 会当无效值丢弃整条声明 - iOS 11+ 支持，Android Chrome 69+ 有限支持（仅部分机型），别指望它在所有安卓设备上生效
如何给整个页面加安全区填充，又不破坏 PC 端布局
最稳妥的做法是只在根元素（html 或 body）上做响应式兜底，而不是每个组件都重复判断。
- 用
@supports (padding: env(safe-area-inset-top))包一层，PC 和不支持的移动端自动跳过 - 不要只设单边，典型写法是：
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) - 如果用了 CSS 自定义属性做主题，别把
env()直接赋给--safe-top后再引用——计算时机不对，得在使用处实时调用env()
fixed 定位元素怎么避开刘海和小圆角（如底部导航栏）
单纯靠 padding 不行，fixed 元素脱离文档流，得用 inset 或 margin 配合 env() 手动推位置。
立即学习“前端免费学习笔记（深入）”；
- 底部固定栏推荐：
bottom: env(safe-area-inset-bottom, 0px)，比padding-bottom更精准 - 如果同时要居中且带内边距，别用
width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right))—— 多次调用env()在某些 iOS 版本有渲染延迟，建议合并成一个calc() - 避免对
fixed元素设height: 100vh，它不含安全区，会遮挡内容；改用height: 100dvh（但注意兼容性，iOS 16+ 才支持dvh）
React/Vue 项目里要不要封装成 Hook/Composable
没必要。这不是逻辑问题，是纯样式层适配，JS 层介入反而增加耦合和运行时开销。
- 检测安全区是否存在？CSS
@supports已经干了这事，JS 用window.visualViewport或screen.availHeight都不准，别试 - 想动态更新？
env()是响应式的，旋转屏幕或横竖切换时浏览器自动重算，无需监听事件或 forceUpdate - 唯一需要 JS 的场景：你非要用
getComputedStyle读取env()值做其他逻辑——这本身就是反模式，CSS 能做的别扔给 JS
真正容易被忽略的是：安全区变量只在「全屏沉浸式」场景下才有意义。如果你的 WebApp 运行在 PWA 容器、微信 WebView 或 Cordova 里，这些环境可能根本不透出 env()，或者返回 0 —— 别假设它一定可用。
