用 position: fixed + bottom: 0 实现粘底需配合 width: 100%、max-width: 100vw、安全区适配及 min-width 媒体查询，避免软键盘导致偏移和触控目标小于 44px。
直接用 position: fixed + bottom: 0 就能实现“粘底”，但真正在多设备上可靠显示，关键不在定位本身，而在容器宽度控制、触摸适配和媒体查询断点选择——尤其在 iOS Safari 和安卓 WebView 中，vh 单位和软键盘弹出时会触发视口重算，导致工具栏被顶起或截断。
用 position: fixed 实现基础粘底，但必须加 width: 100% 和 max-width
很多人只写 position: fixed; bottom: 0;，结果在小屏 iPhone 上工具栏溢出屏幕右侧，或在横屏安卓平板上撑满整个视口宽度却忽略安全区域。这是因为 fixed 元素默认以视口为参考，但未显式约束宽度时，其子元素（比如 flex 容器）可能因内容撑开而越界。
-
width: 100%是必须的，不能依赖left: 0; right: 0—— 后者在某些 Android WebView 中会因缩放 bug 导致 1px 偏移 - 加上
max-width: 100vw防止因滚动条消失/出现导致的宽度抖动（桌面端常见） - 若页面有左右 padding，工具栏需用
margin-left: calc(-1 * var(--page-padding))拉平，而不是靠父容器继承
响应式断点优先用 min-width，避开 iOS Safari 的 device-width 误判
iOS Safari 在横屏时仍报告 device-width 为竖屏值（如 iPhone 15 Pro 报 430px），导致媒体查询错配。用 min-width 更稳定，且符合移动优先原则。
- 典型断点建议：
@media (min-width: 768px)切换为横向图标+文字，@media (min-width: 1024px)可增加悬浮提示或二级入口 - 避免写
@media (max-width: 767px)—— 它在横屏 iPad 上可能意外触发移动端样式 - 工具栏高度要随断点变化：小屏用
height: 56px（符合 Material Design 触摸最小尺寸），大屏可升至64px并加阴影提升层级感
点击区域必须 ≥ 44×44px，且禁用 user-scalable=no
苹果人机界面指南强制要求触控目标不小于 44pt，否则在 iOS 上会被系统判定为“难操作”，影响辅助功能和审核通过。同时，禁用缩放会破坏工具栏按钮的视觉比例和焦点管理。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<button>或<a>加min-width: 44px; min-height: 44px;，内部图标用font-size: 24px+ 垂直居中，留足内边距 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须存在，但不要加user-scalable=no—— 它会让 iOS 在双击缩放后丢失工具栏焦点状态 - 测试时打开 Safari 开发者工具 → “Toggle Device Toolbar”，手动切换横竖屏并双击缩放，确认按钮始终可点、无跳动
最常被忽略的是软键盘弹出时的视口收缩：iOS 会把 vh 重算为“可视区域高度”，导致 fixed 工具栏被顶到键盘上方。解决方案不是监听 resize，而是改用 env(safe-area-inset-bottom) 做底部内边距补偿，并确保工具栏自身不依赖 vh 计算高度。
