移动端底部tabbar用position:fixed+bottom:0最直接，但需解决iOS Safari地址栏遮挡、safe-area-inset-bottom适配和点击穿透三类问题；须设viewport-fit=cover、height用calc(50px+env(safe-area-inset-bottom))、禁用100vh，并通过backface-visibility、z-index及radio+label方案保障兼容性与交互正确。
移动端底部 tabbar 用 position: fixed + bottom: 0 最直接，但必须处理好 iOS Safari 底部地址栏遮挡、安全区域（safe-area-inset-bottom）和点击穿透这三类问题。
为什么 position: fixed 在 iOS 上会“上浮”或被遮住
iOS Safari 的地址栏在滚动时会动态收起/展开，导致视口高度变化，fixed 元素实际位置可能错位；更关键的是，部分机型（如 iPhone X 及以后）有物理“Home Indicator”，系统会通过 env(safe-area-inset-bottom) 预留空间，若不主动适配，tabbar 会被截断或盖住。
- 必须在
<meta name="viewport">中启用安全区域：添加viewport-fit=cover，否则env()不生效 - tabbar 的
height建议用calc(50px + env(safe-area-inset-bottom))，而非单纯设50px - 避免对
body或根容器设height: 100vh—— 在 iOS Safari 中，100vh会取“包含地址栏的完整屏幕高”，滚动后视口变高，内容被撑开
如何防止 tabbar 点击穿透到下层内容
当 tabbar 使用 position: fixed 且父容器有 transform、opacity 或 <code>will-change 时，iOS Safari 可能触发合成层分离，导致 touch 事件未正确捕获，点击看似落在 tabbar 上，实则触发了它下方滚动区域的链接或按钮。
- 给 tabbar 容器加
style="backface-visibility: hidden; transform: translateZ(0);"强制创建独立合成层 - 确保 tabbar 的
z-index明确高于页面其他可交互区域（建议 ≥ 100） - 禁用 tabbar 内部所有
a标签的默认长按菜单：加oncontextmenu="return false"和style="-webkit-user-select: none"
纯 HTML/CSS 实现，不依赖 JS 切换内容的最小可行方案
如果只是静态导航（比如跳转不同页面），完全不需要 JS；但若要在单页内切换面板，需配合 :target 或 details/summary 模拟，不过兼容性有限。更稳妥的是用原生 radio + label 控制显示：
立即学习“前端免费学习笔记（深入）”；
<div class="tabbar">
<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">首页</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">发现</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">我的</label>
</div>
<style>
.tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(50px + env(safe-area-inset-bottom));
display: flex;
background: #fff;
border-top: 1px solid #eee;
z-index: 100;
}
.tabbar input { display: none; }
.tabbar label {
flex: 1;
text-align: center;
line-height: 50px;
font-size: 12px;
color: #666;
}
.tabbar input:checked + label { color: #007aff; }
</style>
注意：label 的 line-height 只设为视觉高度（50px），真实容器高度靠 calc() 补足安全区，否则文字会被顶出。
真正麻烦的不是写出来，而是测——务必在真机 iOS Safari 上验证滚动、横屏、唤起键盘后的 tabbar 位置和响应是否正常；安卓端反而少坑，但也要检查 Chrome 的地址栏行为是否一致。
