加了 viewport-fit=cover 导航栏仍被刘海切掉，因其仅允许内容铺满屏幕顶边，不自动调整布局；需配合 env(safe-area-inset-top) 设置 top 或 padding-top 才能真正避开。
为什么加了 viewport-fit=cover 导航栏还是被刘海切掉
因为 viewport-fit=cover 只是让页面内容“敢铺到屏幕顶边”，它不自动调整布局。Safari 仍按原始视口渲染，position: fixed; top: 0 的导航栏会直接顶到状态栏下方——也就是刘海正下方。你看到的“被切掉”，其实是文字上边缘被状态栏裁剪，不是样式没生效。
必须同时满足两个条件，导航栏才能真正避开：一是 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">（缺 width=device-width 或 initial-scale=1.0，env() 值会退化为 0px）；二是导航自身用 top 或 padding-top 主动读取安全区。
position: fixed 导航栏该用 top 还是 padding-top
取决于结构和交互需求：
- 如果导航是独立容器（如
<header class="nav"></header>），且内部有 logo、标题等需“视觉顶到顶部”的元素，推荐用top: env(safe-area-inset-top, 0px)—— 它让整个导航下移，内部内容自然留在安全区内 - 如果导航内有固定高度的背景色或 border，又希望内容区域留白（比如深色导航+浅色标题），用
padding-top: env(safe-area-inset-top, 0px)更可控 - 千万别混用：既设
top: 0又加padding-top，会导致双倍偏移 - 若导航里有按钮需“贴顶显示”（如返回箭头），可在子元素上加
margin-top: calc(-1 * env(safe-area-inset-top, 0px))拉回，但要测试软键盘弹出时是否错位
微信 H5 中底部安全区适配的坑点
微信内置浏览器（iOS 版）支持 env()，但真机行为和开发者工具不一致：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 微信开发者工具永远返回
env(safe-area-inset-bottom) = 0px，必须用 iPhone X 及以上真机验证 - 不要用
model字符串判断机型（如"iPhone14"），新机型一出就失效；正确方式是比对screenHeight !== safeArea.bottom（通过wx.getSystemInfoSync()获取） - 底部固定按钮（如“立即参与”）不能只靠
padding-bottom，必须同步设置bottom: env(safe-area-inset-bottom, 0px)，否则在 Home Indicator 上方留空 - 微信中
constant()已完全失效，写它等于白写；降级只需一层 fallback：padding-bottom: env(safe-area-inset-bottom, 34px)
Android 挖孔屏要不要适配 env()
基本不用，也别指望它生效：
- Samsung One UI 3.1+、部分华为 EMUI 浏览器支持
env(safe-area-inset-*)，但 Android Chrome（非 WebView）主流版本均不识别，查计算样式就是0px - 挖孔位置不统一（左上、居中、右上、双挖孔），
env()即使返回值也不代表“可安全放置内容”的区域，它只是系统上报的物理遮挡尺寸，和 iOS 的语义不同 - 更务实的做法：对 Android 设备，用 JS 检测
screen.width / screen.height 或 UA 中 <code>"Android"+"Mobile"组合，然后统一加padding-top: 24px和padding-bottom: 48px保底 - 关键交互按钮（如主操作 CTA）务必避开顶部 80px 和底部 120px 区域，这是多数挖孔/手势条的重叠高危区
真正麻烦的从来不是代码怎么写，而是你得在 iPhone 15 Pro、iPad mini 7、三星 S24 Ultra、微信安卓版、Chrome iOS 版之间反复切真机验证——env() 在 Safari 里稳如老狗，在其他环境里可能连变量名都不认识。别省这步。
