移动端底部导航不能仅用position: fixed，因iOS Safari地址栏伸缩、Home Indicator遮挡及键盘弹出会导致跳动、消失或错位；须配合viewport-fit=cover、env(safe-area-inset-bottom)补安全区、禁用overflow: hidden，并用与aria-current保障可访问性。
移动端底部导航不能靠 position: fixed 一招鲜吃遍天，真机上跳动、被遮挡、键盘弹出后错位，全是系统级行为导致的——不是你 CSS 写错了，是没对齐 Safari 和微信 WebView 的渲染机制。
为什么 position: fixed 在 iOS 上会跳或消失？
因为 iOS Safari 滚动时地址栏伸缩会动态改变视口高度，bottom: 0 的元素实际位置被重算；Home Indicator 或刘海屏还会直接盖住未预留安全区的区域。
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1.0, 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
HTML 结构怎么写才不被屏幕阅读器忽略？
结构混乱会导致可访问性失效、JS 切换卡顿、SEO 漏失。关键不是“看起来像导航”，而是“被识别为导航”。
- 用
<nav aria-label="底部导航"></nav>包裹整个栏，不用<div> 或 <code><footer></footer> - 每个 tab 用
<button></button>（纯前端路由）或<a></a>（需 SEO / 服务端渲染），禁用时加disabled并绑定 JS click - 当前激活项必须加
aria-current="page"，例如：<button aria-current="page">首页</button> - 图标优先用内联
<svg></svg>，不用字体图标——iOS 上易模糊、加载失败，且font-size: 0清间隙会让 VoiceOver 忽略文字 -
html和body都要设height: 100%，否则flex: 1没参考高度 - 清除
body默认margin（多数浏览器是 8px） - 导航容器设固定高度（如
height: 60px），别用flex: 0 0 auto—— iOS Safari 对这个组合兼容性不稳定 - 子项等分推荐
flex: 1 1 0+min-width: 0，否则 Safari 会按文字撑宽，破坏均分 - 主内容区改用
min-height: 100dvh，而非height: 100vh—— 键盘弹出会缩小vh，但dvh是动态单位，已广泛支持 - 先检测 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计算安全区——横竖屏切换后window.innerHeight可能滞后，真机验证比逻辑推演更可靠
Flex 布局替代 fixed 的真实收益在哪？
Flex 不是“更潮的写法”，而是让主体内容自动避开底部区域，避免滚动时文字跑到导航下面、键盘弹出后内容塌陷等问题。
立即学习“前端免费学习笔记（深入）”；
微信 iOS 客户端和老 Safari 怎么降级适配？
微信 iOS（尤其 8.0.32 以前）会忽略 viewport-fit，iOS 15.4 以下不支持 calc(8px + env(safe-area-inset-bottom))，必须有 fallback。
最常被忽略的是：安全区补偿必须作用于导航容器自身，而不是它的父元素；以及 aria-current="page" 不是可选项，它是可访问性的硬门槛。这两个点一旦漏掉，既影响残障用户，也埋下后续维护隐患。
