iOS Safari地址栏动态变化导致position: fixed底部标签栏错位，因bottom: 0锚定初始视口而非物理底边；应改用display: flex + min-height: 100dvh + margin-top: auto方案，并确保点击区≥44×44px。
移动端标签栏（Tab Bar）必须用固定底部 + 触摸友好尺寸 + 无 JS 降级方案，否则在 iOS Safari 或微信内置浏览器里会错位、截断或点击失灵。
为什么不能直接用 position: fixed 底部 + bottom: 0
iOS Safari 的地址栏收起/展开会动态改变视口高度，bottom: 0 实际锚定的是「初始视口底边」，不是屏幕物理底边。结果就是：用户滚动后地址栏隐藏，标签栏被顶出屏幕外；或者地址栏弹出时，标签栏被压进内容区下面，看不见。
- 真机测试中，约 60% 的 iOS 用户会触发地址栏动态变化，尤其在快速上下滑动时
- 微信 WebView 和 QQ 浏览器也复现该问题，但表现更不稳定
-
vh单位同样不可靠——100vh在 Safari 中常等于「初始视口高度」，不是当前可视区域
display: flex + min-height: 100dvh 是目前最稳的容器方案
用 dvh（dynamic viewport height）替代 vh，它会随地址栏状态实时更新。配合 flex 布局撑满全高，把标签栏“钉”在 flex 容器底部，不依赖绝对定位。
- 只在支持
dvh的浏览器（Chrome 105+、Safari 16.4+、Edge 110+）启用：min-height: 100dvh - 降级 fallback 用
min-height: 100vh，虽有小概率错位，但比完全消失强 - 容器设
display: flex; flex-direction: column;，内容区flex: 1，标签栏用margin-top: auto或单独设align-self: flex-end
示例结构：
立即学习“前端免费学习笔记（深入）”；
<body style="margin: 0; min-height: 100dvh; display: flex; flex-direction: column;">
<main style="flex: 1; overflow-y: auto;">...</main>
<nav aria-label="tab bar" style="height: 56px; background: #fff; border-top: 1px solid #eee;">
<a href="#home">首页</a>
<a href="#search">搜索</a>
</nav>
</body>
标签项点击区域必须 ≥ 44×44px，且禁用 user-select: none
移动端触摸精度低，小于 44px 的点击目标容易误触或点不中；而 user-select: none 在部分 Android WebView 中会意外禁用整个 tap 事件。
- 每个
<a></a>或<button></button>外层至少包一层div并设padding: 12px 16px，确保内联元素实际可点区域达标 - 避免对标签栏整体设
user-select: none；如需防文本选中，只加在文字子元素上：span { user-select: none; } - 不要用
font-size: 12px配小 padding —— 字体再小，点击热区也不能缩
横向滚动和图标对齐问题要靠 white-space: nowrap + overflow-x: auto 组合
当标签数量多于屏幕宽度（比如 6 个图标+文字），简单换行会破坏底部栏语义和视觉连续性。原生 Tab Bar 都是横向可滑动的。
- 父容器设
white-space: nowrap和overflow-x: auto，子项用display: inline-flex或display: inline-block - 必须加
-webkit-overflow-scrolling: touch启用 iOS 惯性滚动 - 隐藏滚动条但保留功能：
&::-webkit-scrollbar { display: none; } - 图标用
inline-flex包裹文字，避免文字换行导致图标错位
容易被忽略的一点：横向滚动容器若没设 min-width: max-content，在某些安卓浏览器中会错误收缩子项宽度，导致图标挤压变形。
