必须同时设置width=device-width、initial-scale=1.0和viewport-fit=cover，否则env(safe-area-inset-bottom)恒为0；padding-bottom需直接作用于fixed底部栏自身，且fallback值须前置声明。
不加 viewport-fit=cover，env(safe-area-inset-bottom) 就是 0 —— 这不是兼容性问题，是功能开关没打开。
viewport-fit=cover 必须和 width=device-width 共存
单独写 viewport-fit=cover 无效。浏览器会忽略它，env(safe-area-inset-bottom) 永远返回 0px，且不报错、不警告。
-
正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> -
错误写法：
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 或样式层出了问题。
- 底部栏元素必须是
的**最后一个子节点**，不能包在<div id="app"> 或其他 wrapper 里（微信 iOS 会因此失效） <li>任意祖先节点含 <code>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) 就等于没写。
