底部导航栏应采用Flex布局而非fixed定位，通过html/body设height:100%、重置margin、主体flex:1撑满剩余高度，并用env(safe-area-inset-bottom)适配iOS安全区。
底部导航栏固定在 viewport 底部，但不遮挡内容
直接用 position: fixed 会脱离文档流，容易导致内容被遮盖（比如滚动时文字跑到导航栏下面）。Flex 的优势在于它能保持布局上下文，让「主体内容」自动避开底部区域。核心思路是：把整个页面设为 flex 容器，方向为 column，再用 flex: 1 让中间内容区域撑满剩余高度。
常见错误是只给 body 设 display: flex，却忘了重置默认 margin 和 min-height —— 这会导致 flex 不生效或高度计算异常。
-
html和body都要设height: 100%，否则flex: 1没参考高度 - 移除
body默认的margin（多数浏览器默认 8px） - 底部导航容器设固定高度（如
height: 60px），不要用flex: 0 0 auto——移动端 iOS Safari 对这个组合兼容性不稳定
导航项等分且水平居中，同时适配图标+文字
等分本身很简单：对导航项容器设 display: flex，每个子项设 flex: 1。但实际踩坑多在「视觉等宽」和「点击热区」上：文字长度不同、图标尺寸不一、iOS 上 flex: 1 在 button 内表现异常。
推荐写法是放弃子项用 flex: 1，改用 flex: 1 1 0 + min-width: 0，并统一子项为 display: flex; flex-direction: column; align-items: center;。
- 必须加
min-width: 0，否则 Safari 会按文字内容撑开宽度，破坏等分 - 图标建议用 inline SVG 或字体图标，避免 img 加载延迟导致布局抖动
- 如果用
button包裹导航项，需重置button默认的 padding 和 background，否则各端表现不一致
处理 iOS Safari 底部安全区与输入框弹起后的错位
iOS Safari 的「安全区」会让 fixed 元素被系统栏遮挡，而纯 Flex 布局虽然不依赖 fixed，但在软键盘弹出时，viewport 高度变化仍可能让底部导航上浮或压缩。
关键不是监听键盘事件，而是用 CSS 原生方案：结合 env(safe-area-inset-bottom) 动态调整 padding 或 margin。
- 导航容器外层加
padding-bottom: env(safe-area-inset-bottom)，内部用height: 60px固定，这样既留出安全区空间，又不改变布局结构 - 不要在 JS 中读取
window.innerHeight做判断——软键盘弹出时该值在 iOS 上不可靠 - 若导航中有输入框（比如搜索入口），确保其
scrollIntoView({ behavior: 'smooth', block: 'nearest' })调用时机在 focus 后的 next tick，否则 iOS 可能滚动不到位
响应式断点下取消等分，改用图标优先布局
在小屏（比如 iPhone SE）上强行等分 5 个带文字的导航项，会导致文字换行或溢出。更合理的做法是：小于 375px 时，只显示图标，文字隐藏；中屏（375–414px）显示图标+短文字（如“首页”缩为“首页”或“主页”）；大屏再恢复完整文字。
这里的关键不是媒体查询本身，而是如何让文字隐藏不影响 flex 等分逻辑——不能用 display: none，否则该项就从 flex 流中消失了。
- 用
visibility: hidden; height: 0; overflow: hidden;隐藏文字，保留占位 - 图标容器统一设
width: 24px; height: 24px;，避免因字体图标渲染差异造成宽度波动 - 慎用
font-size: 0配合letter-spacing控制文字，部分 Android WebView 对此支持不佳
实际最易忽略的是：flex 布局中，如果底部导航里用了 input 或 textarea，它们在 iOS 上默认有内边距和圆角，会破坏高度一致性，必须显式重置 border-radius: 0 和 padding。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
