HTML移动端刘海屏布局的兼容处理方法-html教程-PHP中文网

必须设置viewport-fit=cover并配合四边env()安全区变量及fallback值，否则iPhone X+或折叠屏会出现顶部遮挡、底部TabBar被Home Indicator覆盖；env()需带单位（如0px）且四边均设，避免布局崩塌。

html移动端刘海屏布局的兼容处理方法

刘海屏布局出问题，不是 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 是绑定生效的最小组合：

必须硬写在里，JS 动态插入无效
部分安卓 WebView（如旧版 Samsung Internet）会忽略 viewport-fit，但加了至少不影响；不加则 iOS 全面失效
加了之后页面会真正全屏渲染，所以紧接着必须用 env() 主动留白，否则内容直接进刘海区

`env()` 必须带 fallback 值，且要四边都设

env(safe-area-inset-top) 单独写会触发 Safari 旧版本（iOS 11–12）整条 CSS 规则被丢弃，导致 padding 彻底失效。同时，仅处理顶部是常见错误——横屏时 Home Indicator 在底部，折叠屏左右可能有黑边：

DeepBI DHTML 页面生成器

生成可在 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 辅助判断是否真有安全区