不能直接用 position: fixed 做底部导航，因其脱离文档流会导致内容遮盖、软键盘顶起时错位，iOS Safari 表现尤其不稳定；应采用 Flex 布局：html/body 设 height: 100%、重置 margin、底部固定 height，导航项用 flex: 1 1 0; min-width: 0 确保等分，外层加 padding-bottom: env(safe-area-inset-bottom) 适配安全区。
为什么不能直接用 position: fixed 做底部导航
直接加 position: fixed; bottom: 0 看似最简，但实际会脱离文档流，导致主体内容被遮盖——比如滚动时文字跑到导航栏下面、input 聚焦后软键盘顶起页面，导航上浮或压缩。iOS Safari 对 fixed 在 viewport 变化时行为尤其不稳定，不是“偶尔错位”，而是必现。
Flex 实现底部固定的关键三步
核心是让整个页面成为 column 方向的 flex 容器，底部区域不抢高度，中间内容自动撑满剩余空间。
-
html和body都要设height: 100%—— 否则flex: 1没参考基准，直接失效 - 重置
body默认margin（多数浏览器给 8px），否则 flex 容器高度计算偏差 - 底部容器用固定
height（如60px），别写flex: 0 0 auto—— Safari 对这个组合解析异常，等分和热区都会崩
导航项等分且点击热区可靠的具体写法
单纯 flex: 1 在按钮内或文字长度差异大时，Safari 会按内容撑宽，破坏视觉等分。必须加约束：
- 导航项容器设
display: flex，子项统一用flex: 1 1 0; min-width: 0 - 每个子项内部用
display: flex; flex-direction: column; align-items: center;对齐图标+文字 - 图标优先用 inline SVG 或字体图标，避免
- 若用
包裹，必须重置默认padding和background，否则安卓/IOS 表现不一致
适配 iOS 安全区与软键盘弹出的 CSS 原生方案
不要在 JS 中监听 window.innerHeight，iOS 上软键盘弹出时该值不可靠，且触发时机难控。
- 底部容器外层加
padding-bottom: env(safe-area-inset-bottom)，内部保持height: 60px - 这样既留出安全区空间，又不改变 flex 布局结构，也不依赖 JS
- 如果导航里有搜索入口，调用
scrollIntoView({ behavior: 'smooth', block: 'nearest' })必须放在focus之后的 next tick（例如用setTimeout(() => ..., 0)或Promise.resolve().then(...)）
真正容易被忽略的不是“怎么写 flex”，而是 min-width: 0 和 env(safe-area-inset-bottom) 这两个看似微小的细节——它们决定了等分是否真等、安全区是否真安全、用户点没点中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
