移动端Tabbar固定底部失效的根源是软键盘导致viewport高度重算，解决需用fixed定位+viewport-fit=cover+safe-area-inset-bottom适配刘海屏与导航栏，并禁用vh单位、规范flex布局及active状态交互逻辑。
Tabbar 固定在 viewport 底部，不被软键盘顶起
移动端固定底部 Tabbar 最常见的失效场景，是 iOS Safari 或安卓 WebView 中弹出软键盘时，position: fixed 被错误地“上推”，导致 Tabbar 悬空或消失。这不是 CSS 写错了，而是浏览器把 viewport 高度重算成了“可视区域减去键盘高度”。
解决核心：强制让 Tabbar 绑定到物理屏幕底部，而非逻辑 viewport 底部。
- 给
加style="height: 100vh; overflow-y: hidden;"（防止滚动干扰定位） - Tabbar 容器用
position: fixed; bottom: 0; left: 0; right: 0; height: 50px;，**不要依赖vh单位设高度**（iOS 下100vh会随键盘缩放） - 关键补丁：在
中加<meta name="viewport" content="viewport-fit=cover">，否则 iPhone X+ 的安全区会让fixed偏上
用 flex 均分四个 icon+文字项，且点击区域足够大
均分本身简单，但移动端真机上常出现图标错位、文字截断、点击热区过小——根本原因是 flex 默认行为没约束换行和对齐，加上 icon 字体/图片加载异步影响布局。
推荐写法直接锁定行为：
立即学习“前端免费学习笔记（深入）”；
- 容器设
display: flex; justify-content: space-between;（不用space-around，避免首尾留白不一致） - 每个 tab 项用
flex: 1;+text-align: center;，内部用display: flex; flex-direction: column; align-items: center; - 图标用
<svg></svg>或字体图标（如iconfont），**禁止用 img 标签+ width/height 百分比**（易因加载延迟抖动） - 文字用
font-size: 10px;+line-height: 1;，外层 tab 高度至少48px（满足 WCAG 点击最小尺寸）
示例结构：
<div class="tabbar">
<button class="tab-item">
<span class="tab-icon"></span>
<span class="tab-label">首页</span>
</button>
<!-- 其他三项同理 -->
</div>active 状态样式失效或闪烁
用户点击后图标/文字颜色没变，或者快速连点时状态闪回——多数是 CSS 优先级或伪类触发时机问题，尤其在 iOS 上 :active 极其短暂。
- 别只靠
.tab-item:active，改用 JS 切换.tab-item.active类，并在 touchstart 事件里立即设置（比 click 更快） - active 样式必须包含
transform: scale(0.98);或opacity: 0.8;，纯颜色变化在弱光下不可见 - 如果用了
will-change: transform;，记得在 active 结束后移除，否则可能卡顿 - 检查是否被
-webkit-tap-highlight-color: transparent;干扰了视觉反馈（这个要保留，但需搭配自己的 active 效果）
适配刘海屏和安卓虚拟导航栏
iPhone X 及以上机型的底部安全区、部分安卓机的虚拟导航键，会让 fixed 元素被遮挡或压扁，单纯加 padding-bottom 不可靠。
- 用
env(safe-area-inset-bottom)作为 padding 底部值：padding-bottom: env(safe-area-inset-bottom); - 同时 fallback 到
constant(safe-area-inset-bottom)（旧版 iOS 支持） - **不能只加 padding**：Tabbar 容器高度仍为
50px，padding 是额外加在内容区下方，确保图标文字不被遮 - 安卓端若检测到虚拟导航栏（如通过
window.innerHeight 粗略判断），可动态加 <code>margin-bottom: 48px;保底
最麻烦的其实是微信内嵌 WebView —— 它有时会忽略 env()，这时候得靠 JS 注入动态 style 标签补丁，不是纯 CSS 能覆盖的。
