必须设置viewport-fit=cover并配合四边env()安全区变量及fallback值，否则iPhone X+或折叠屏会出现顶部遮挡、底部TabBar被Home Indicator覆盖；env()需带单位（如0px）且四边均设，避免布局崩塌。
刘海屏布局出问题，不是 CSS 写错了，而是 viewport-fit=cover 没开、env() 没 fallback、或者只加了 safe-area-inset-top 忘了底部——这三处漏掉任一，iPhone X+ 或 Android 折叠屏上就会顶部文字被遮、底部 TabBar 被 Home Indicator 吃掉。
必须加 viewport-fit=cover 才能启用安全区变量
不加这个，env(safe-area-inset-top) 在所有 iOS 设备上都返回 0px，不是 bug，是规范行为。它和 width=device-width、initial-scale=1.0 是绑定生效的最小组合：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须硬写在里，JS 动态插入无效 - 部分安卓 WebView（如旧版 Samsung Internet）会忽略
viewport-fit，但加了至少不影响；不加则 iOS 全面失效 - 加了之后页面会真正全屏渲染，所以紧接着必须用
env()主动留白，否则内容直接进刘海区
env() 必须带 fallback 值，且要四边都设
env(safe-area-inset-top) 单独写会触发 Safari 旧版本（iOS 11–12）整条 CSS 规则被丢弃，导致 padding 彻底失效。同时，仅处理顶部是常见错误——横屏时 Home Indicator 在底部，折叠屏左右可能有黑边：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法：
padding-top: env(safe-area-inset-top, 0px);，fallback 用0px（不能用0，单位缺失 Safari 会拒收） - 四边都要设：哪怕你只关心顶部导航栏，也要同步写
padding-bottom: env(safe-area-inset-bottom, 0px)，否则 iPad 横屏时底部内容被遮 - 别给
body直接加四边 padding：如果页面已有固定高度header，优先给header内部标题或按钮加padding-top，避免 body 整体下移引发滚动错位
fixed 底部元素必须用 env() 替代硬编码数值
写 bottom: 34px 这类值在 iPhone X–15 系列上会错：不同机型 Home Indicator 高度不同（34px / 21px / 0px），且横竖屏切换时不变。正确做法是让浏览器动态计算：
立即学习“前端免费学习笔记（深入）”；
- 对
position: fixed; bottom: 0;的 TabBar，改用：padding-bottom: env(safe-area-inset-bottom, 0px);或margin-bottom: env(safe-area-inset-bottom, 0px); - 若需精确控制高度（比如 TabBar 高 56px + 安全区），用
height: calc(56px + env(safe-area-inset-bottom, 0px));，注意 Safari ≤ iOS 12 不支持calc()混用单位，得统一写成px - 避免用
@supports (padding-top: env(safe-area-inset-top))包裹全部逻辑：它在部分安卓 WebView 中判断不准，更稳妥的是先加 fallback，再用 JS 检测window.visualViewport?.height辅助判断是否真有安全区
最易被忽略的一点：安全区不是“检测刘海”，而是“声明边界”。你写的每一条 env()，本质是在告诉浏览器：“这里不允许放可交互内容”——所以哪怕当前设备没刘海，只要用了 viewport-fit=cover，就该保持四边 env() 一致，否则换设备或切横屏时，布局会无声崩塌。
