移动端底部导航仅用position: fixed会失效，因iOS Safari地址栏伸缩、Home Indicator遮挡及键盘弹出裁剪等系统行为；须配合viewport-fit=cover、padding-bottom: env(safe-area-inset-bottom)加于导航容器自身、禁用body overflow: hidden，并采用语义化结构。

移动端底部导航光用 position: fixed 会失效——不是你 CSS 写错了，是 iOS Safari 滚动时地址栏伸缩、Home Indicator 遮挡、键盘弹出裁剪导致的系统级行为。必须配合 viewport 设置、安全区适配和语义化结构，缺一不可。

为什么 bottom: 0 在真机上会跳动或消失

iOS Safari 和部分安卓 WebView 的滚动机制与地址栏联动，bottom: 0 实际落在 Home Indicator 下方，用户点不到；横竖屏切换或键盘弹出后，window.innerHeight 可能滞后，JS 动态计算安全区反而更不准。

• viewport-fit=cover 必须写在 里，否则 env(safe-area-inset-bottom) 恒为 0
• padding-bottom: env(safe-area-inset-bottom) 要加在导航容器自身上，不是 body，也不是外层 div
• 禁用 overflow: hidden 在 body 或根容器上——键盘弹出会把 fixed 元素裁掉
• 错误写法：bottom: env(safe-area-inset-bottom)，Safari 会静默丢弃整条声明；它只支持参与 padding 或 margin

结构怎么写才不被屏幕阅读器忽略

一堆 div 堆出来的 tab 栏，屏幕阅读器识别不了导航意图，SEO 也漏失。关键不是“看起来像”，而是“被识别为导航”。

DeepBI DHTML 页面生成器

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

下载

• 必须用
  包裹，不能用
  或
• 每个 tab 用 （纯前端路由）或 （服务端渲染/需 SEO），禁用 空链接
• 当前激活项必须加 aria-current="page"，例如：首页
• 图标优先用内联 ，不用字体图标——iOS 上易模糊、加载失败，且 font-size: 0 清间隙会让 VoiceOver 忽略文字

微信 iOS 客户端和老 Safari 怎么降级兼容

微信 iOS（尤其 8.0.32 之前）会忽略 viewport-fit，iOS 15.4 以下不支持 calc(8px + env(safe-area-inset-bottom))，必须 fallback。

• 先检测 UA：/(MicroMessenger|MQQBrowser)\/\d+\.\d+.*?iOS.*?WebKit/i.test(navigator.userAgent)
• 对微信 iOS 或旧 Safari，fallback 固定值：padding-bottom: 34px（iOS 安全区典型高度）
• 需要额外留白时，拆成两行写：padding-bottom: 8px; + padding-bottom: calc(8px + env(safe-area-inset-bottom));，低版本 Safari 只认第一行
• 避免用 JS 监听 resize 计算安全区——真机验证比逻辑推演更可靠

最常被忽略的一点：框架里导航闪动，往往不是 CSS 问题，而是组件重渲染触发了 layout thrashing，或父级用了 transform 打破了 fixed 的层叠上下文。别急着加 will-change，先检查是否意外给 body 或导航容器加了 transform、filter 或 opacity。