HTML移动端底部安全区布局的兼容技巧-html教程-PHP中文网

必须同时设置width=device-width、initial-scale=1.0和viewport-fit=cover，否则env(safe-area-inset-bottom)恒为0；padding-bottom需直接作用于fixed底部栏自身，且fallback值须前置声明。

html移动端底部安全区布局的兼容技巧

不加 viewport-fit=cover，env(safe-area-inset-bottom) 就是 0 —— 这不是兼容性问题，是功能开关没打开。

viewport-fit=cover 必须和 width=device-width 共存

单独写 viewport-fit=cover 无效。浏览器会忽略它，env(safe-area-inset-bottom) 永远返回 0px，且不报错、不警告。

正确写法：
错误写法：viewport-fit=auto、viewport-fit=contain、或漏掉 width=device-width 和 initial-scale=1.0
微信 iOS 客户端（尤其 8.0.32 之前）可能静默忽略该声明，需 JS fallback：检测 navigator.userAgent.includes('iPhone') 且 env() 返回值为 0px 时，手动加 padding-bottom: 34px

padding-bottom: env(safe-area-inset-bottom) 加在哪

必须加在 position: fixed 底部栏容器自身上，不是 body、不是父 div、更不能加在 html 上。

加在 body 上会导致整个页面下推，顶部状态栏被裁切，滚动异常
对 fixed 元素设 margin-bottom 无效（脱离文档流）
推荐写法：.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; padding-bottom: env(safe-area-inset-bottom); }
若需底部留空 8px，不要用 bottom: calc(8px + env(safe-area-inset-bottom))（Safari 15.4 以下不支持），改用两行：padding-bottom: 8px; 和 padding-bottom: calc(8px + env(safe-area-inset-bottom));

@supports 检测必须带属性+值，且 fallback 要前置

@supports (env(safe-area-inset-bottom)) 是非法语法，整条规则会被浏览器直接跳过。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

唯一合法写法是：@supports (padding-bottom: env(safe-area-inset-bottom))
padding-bottom 的 fallback 值（如 34px）必须写在 env() 行之前，靠 CSS 层叠覆盖
推荐组合写法：padding-bottom: 34px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);（constant() 兼容 iOS 11.0–11.1）
别只依赖 env()：横屏、旧机型、安卓 WebView 都可能返回 0，建议兜底用 max(34px, env(safe-area-inset-bottom))

DOM 结构和 transform 是隐藏杀手

即使 CSS 全对，底部栏仍被遮挡？大概率是 DOM 或样式层出了问题。

底部栏元素必须是的**最后一个子节点**，不能包在 或其他 wrapper 里（微信 iOS 会因此失效）
任意祖先节点含 transform、filter、perspective 或 will-change，都会让 position: fixed 退化为相对该祖先定位


检查方式：在 Chrome DevTools 或 Safari Web Inspector 中逐级查看 computed styles，找 transform 是否非 none

真机测试不可替代：微信开发者工具不模拟安全区，screenHeight !== safeArea.bottom 在模拟器里永远为 false

最常被忽略的点：不是“怎么写对”，而是“谁在干扰它”——viewport 声明缺位、DOM 顺序错乱、祖先 transform 存在、fallback 没前置，四者任一出问题，env(safe-area-inset-bottom) 就等于没写。