移动端底部工具栏必须用 position: fixed; bottom: 0; left: 0; right: 0，设固定 height（如 56px），配合 padding-bottom: env(safe-area-inset-bottom) 和 viewport-fit=cover，并避免祖先元素含 transform，内容区用 padding-bottom 避让。
移动端底部工具栏必须用 position: fixed，但光写 bottom: 0 不够
只加 bottom: 0 的 position: fixed 元素在 iOS Safari 和部分安卓 WebView 中会跳动、错位甚至消失——尤其在地址栏收放或键盘弹出时。这不是 bug，是浏览器对视口高度的动态重算导致的。
真正可用的定位三件套是：position: fixed; bottom: 0; left: 0; right: 0。缺一不可：漏掉 left: 0 或 right: 0，缩放或横屏时可能左右留白；只靠 width: 100% 在某些 UA 下会失效。
-
height必须设为固定值（如56px），禁用100vh、100%或clamp()—— Safari 地址栏伸缩会触发视口高度突变，导致导航栏“抽搐” - 必须给
body加padding-bottom，值 ≥ 工具栏高度，否则正文最后一段会被遮住 - 避免在该工具栏内部放置
<input>或<textarea>，iOS 键盘弹起后容易触发布局重排，造成整体偏移
安全区适配必须显式处理 env(safe-area-inset-bottom)
iPhone X 及后续机型有圆角和 Home Indicator，单纯 bottom: 0 会让工具栏内容被裁切或压在指示器上。不加适配，用户点不到最底下一排图标。
正确做法是在工具栏容器上加：padding-bottom: env(safe-area-inset-bottom)。这个 CSS 环境变量由系统注入，值在刘海屏设备上非零，在普通屏上为 0，无需 JS 判断。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
<meta name="viewport" content="..., viewport-fit=cover">，否则env()不生效 - 不要用
calc(56px + env(safe-area-inset-bottom))去覆盖 height —— 高度仍要保持固定，padding 是额外留白 - 若工具栏含文字按钮，建议用
text-align: center+flex: 1布局，避免因 padding-bottom 导致文字偏上
别把工具栏塞进带 transform 的父容器里
如果工具栏外层 DOM 被套了 transform: scale(1)、rotate(0) 或任何 transform 值，position: fixed 会退化为相对该父元素定位，而不是视口。这是 iOS 和 Chrome Mobile 的明确行为，不是兼容性问题，是规范定义。
常见踩坑场景：页面用了全局缩放适配（如 rem 方案中对 html 设 transform: scale()），或某个动画库自动加了 transform 类名。
- 检查工具栏的任意祖先节点是否含
transform、perspective、filter或will-change，只要有一个，fixed 就失效 - 解决方案只有两个：把工具栏提到
body直接子级；或移除祖先的 transform（改用zoom或媒体查询适配） - 微信内置 WebView 对此更敏感，哪怕
transform: translateZ(0)也会触发
正文区域不能只靠 margin-bottom 避让，必须用 padding-bottom
很多人给 main 或内容容器加 margin-bottom: 56px，以为能空出空间。但 margin 无法阻止 fixed 元素覆盖，且在 flex/grid 容器中 margin 可能被折叠或忽略。
唯一可靠方式是：给内容区域本身加 padding-bottom，并确保其 box-sizing 为 border-box（现代 reset 通常已设）。
- 如果工具栏高度动态变化（比如夜间模式下变高），硬编码
padding-bottom会失效 —— 此时应改用 CSS 自定义属性 +padding-bottom: var(--toolbar-height, 56px)，再用 JS 更新变量 - 不要对
body同时设padding-bottom和对main设padding-bottom，会造成双倍留白 - 若用 Vue/React，组件重渲染可能触发 layout thrashing，导致 padding 计算延迟 —— 建议在 mounted/useEffect 中用
getComputedStyle读取真实高度再设
z-index 不能设太高（比如 99999），它和弹窗、loading 层共用同一套层级体系。设成 999 足够，再高反而容易被其他模块意外覆盖。 
