iOS Safari底部工具栏不贴底因min-height: 100vh解析偏差，应改用100dvh；tap highlight遮挡需禁用并补:active样式；微信Android错位需改flex占比并加transform；键盘遮挡需监听focus+visualViewport或硬编码适配。
Flexbox底部工具栏在iOS Safari上不贴底
Flexbox设display: flex + flex-direction: column后，margin-top: auto或margin-bottom: auto在iOS 15–16的Safari里常失效，工具栏悬在半空。根本原因是WebKit对min-height: 100vh的解析偏差——它把地址栏高度算进vh，但滚动时又动态调整，导致容器高度抖动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height: 100dvh替代100vh（dvh是“dynamic viewport height”，iOS 15.4+、Android Chrome 104+支持） - 降级方案：JavaScript检测
matchMedia('(max-height: 700px)')并动态写style="min-height: calc(100vh - 60px)"，60px约等于iOS地址栏高度 - 避免给父容器设
overflow: hidden，它会截断position: fixed的子元素在Safari中的渲染
移动端底部工具栏点击区域太小，Tap Highlight遮挡图标
iOS Safari默认的tap highlight（灰色半透明蒙层）会盖住svg图标或iconfont，尤其当工具栏高度仅48px时，用户误判是否点中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局禁用：
* { -webkit-tap-highlight-color: transparent; }，但需同步补:active状态样式，否则无反馈 - 工具栏内按钮必须设
padding: 12px以上，iOS要求最小触控面积为44×44pt，44px在@2x屏才够用 - 不用
font-size: 12px配图标，小字号在高DPI屏上边缘发虚；改用background-image或inline svg确保清晰
Flexbox工具栏在微信内置浏览器里错位或换行
微信Android版X5内核（基于旧版Blink）对flex-wrap: nowrap和flex-basis解析异常，5个flex: 1的按钮在窄屏下强行换两行，中间留白。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃
flex: 1均分，改用flex: 0 0 20%（固定占比），再用max-width: 90px防文字撑开 - 加
white-space: nowrap到工具栏容器，阻止文本换行干扰布局 - 微信iOS版（WKWebView）没问题，但Android版需额外加
transform: translateZ(0)触发硬件加速，修复重排卡顿
工具栏固定定位后，输入框弹出时被遮挡
Android键盘弹出时，position: fixed底部工具栏不会自动上移，反而盖住<input>，用户看不见自己输入的内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
focusin事件，检测document.activeElement是否为input或textarea，然后给工具栏加transform: translateY(200px)（200px≈键盘高度） - 用
visualViewport.height比window.innerHeight更准：键盘弹出时前者明显变小，可据此动态调整 - 别依赖
resize事件——Android很多机型不触发，只靠focus/blur组合更可靠
真正麻烦的是visualViewport在微信Android X5内核里完全不可用，这时候只能硬编码适配主流机型的键盘高度，比如小米13按240px，OPPO Reno10按220px——没有银弹，只有设备列表和条件判断。
