tab导航需设min-width:0防换行，配合white-space:nowrap/overflow:hidden/text-overflow:ellipsis截断；点击热区≥44px；用visibility:hidden替代display:none；ios滚动加-webkit-overflow-scrolling:touch。
Tab导航项等宽但内容溢出被截断
Flex布局下用 flex: 1 均分 tab-item 宽度很常见，但文字过长时默认会缩略（text-overflow: ellipsis），尤其在 iOS Safari 下还可能因字体渲染差异导致最后一项“掉行”或宽度不均。
- 必须给每个
tab-item显式设min-width: 0，否则 Flex 项默认有min-width: auto，会阻止收缩，导致换行或溢出 - 文字截断要三层配合：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，缺一不可 - Android 和 iOS 对
font-size小于 16px 的处理不同，建议最小字号设为14px并加-webkit-text-size-adjust: none
点击切换无视觉反馈或状态不同步
纯 CSS 实现 Tab 切换时，常依赖 :checked + ~ 选择器，但移动端点击区域小、响应延迟高，容易点不中或状态没更新。
- 务必给
tab-item内的label或input[type="radio"]设置足够点击热区（至少44px × 44px） - 避免用
display: none隐藏非激活面板——它会让屏幕阅读器跳过，且某些安卓 WebView 会重置内部滚动位置；改用visibility: hidden+height: 0+overflow: hidden - 如果用 JS 控制状态，别只改 class，记得同步
aria-selected="true"和tabindex="0"，否则 TalkBack/VoiceOver 会失效
滑动惯性不足或卡顿（尤其是 iOS）
用 overflow-x: auto 实现横向滚动 Tab 导航时，iOS 上默认没有弹性滚动，手指松开就停，体验像“拖不动”。
- 必须加
-webkit-overflow-scrolling: touch（仅 Safari 有效，不影响其他浏览器） - 父容器需设
scroll-behavior: smooth，但注意：它不触发scroll事件，无法监听滚动结束；如需回调，得用requestAnimationFrame轮询scrollLeft - 避免在
tab-nav上同时设transform和overflow，某些旧版 Chrome 会禁用硬件加速，导致滚动掉帧
横竖屏切换后 Tab 宽度错乱
用 vw 或 flex-basis 固定单个 tab 宽度，在横屏变竖屏时，视口宽度突变，Flex 计算未及时重排，出现空白或重叠。
立即学习“前端免费学习笔记（深入）”；
- 不用
vw算单个宽度，改用flex: 1+max-width限制上限（例如max-width: 120px），兼顾等分与防撑爆 - 监听
orientationchange事件不够可靠（部分 Android 不触发），优先用matchMedia("(orientation: landscape)")+addEventListener("change") - 真机调试时发现错乱，先检查是否忘了给
tab-nav设width: 100%—— Flex 容器若无明确宽度，在某些 UC 浏览器里会按内容撑开，破坏等分逻辑
最麻烦的不是写出来，是让所有安卓碎片化 WebView 和 iOS 各版本都表现一致。特别是 min-width: 0 和 -webkit-overflow-scrolling 这两个，漏一个，整套 UI 在某个机型上就“看起来没问题，点起来不对劲”。
