移动端底部导航仅用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必须写在<meta name="viewport">里，否则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
<nav aria-label="底部导航"></nav> 结构怎么写才不被屏幕阅读器忽略
一堆 div 堆出来的 tab 栏，屏幕阅读器识别不了导航意图，SEO 也漏失。关键不是“看起来像”，而是“被识别为导航”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须用
<nav aria-label="底部导航"></nav>包裹，不能用<div> 或 <code><footer></footer> - 每个 tab 用
<button></button>（纯前端路由）或<a></a>（服务端渲染/需 SEO），禁用<a href="#"></a>空链接 - 当前激活项必须加
aria-current="page"，例如：<button aria-current="page">首页</button> - 图标优先用内联
<svg></svg>，不用字体图标——iOS 上易模糊、加载失败，且font-size: 0清间隙会让 VoiceOver 忽略文字 - 先检测 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计算安全区——真机验证比逻辑推演更可靠
微信 iOS 客户端和老 Safari 怎么降级兼容
微信 iOS（尤其 8.0.32 之前）会忽略 viewport-fit，iOS 15.4 以下不支持 calc(8px + env(safe-area-inset-bottom))，必须 fallback。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：框架里导航闪动，往往不是 CSS 问题，而是组件重渲染触发了 layout thrashing，或父级用了 transform 打破了 fixed 的层叠上下文。别急着加 will-change，先检查是否意外给 body 或导航容器加了 transform、filter 或 opacity。
