手机浏览器页脚抖动主因是 viewport 高度动态变化导致 bottom: 0 定位跳变，应改用 100vh 布局、禁用缩放、viewport-fit=cover 修正，并辅以 JS 锁定初始视口高度及 overscroll-behavior 等优化。
手机浏览器中固定页脚抖动，通常是因为 viewport 高度动态变化（比如地址栏显示/隐藏）导致 bottom: 0 的定位基准跳变。单纯用 position: fixed; bottom: 0 在 iOS Safari 和部分安卓浏览器中容易失稳。核心解法是脱离对动态 viewport 高度的依赖，改用视口单位（vh）配合容器高度控制，或用 JS 锁定稳定高度。
用 100vh 替代 100% 高度布局
很多抖动源于父容器用了 height: 100%，而百分比高度在移动端会随地址栏伸缩反复重算。改用视口单位更可靠：
- 给根容器（如
html或最外层 wrapper）设height: 100vh，它始终取初始视口高度，不随地址栏变化而重排 - 页脚用
position: fixed; bottom: 0; width: 100%;，再配合z-index确保层级 - 内容区用
calc(100vh - [页脚高度])控制最大高度，避免内容撑出视口
禁用页面缩放 + 修正 viewport 设置
缩放或 viewport 缩放行为会干扰固定定位。在 中确保：
- 额外加
viewport-fit=cover（尤其 iOS），防止安全区域裁剪导致定位偏移： - CSS 中对
body加margin: 0; padding: 0;，避免默认边距引发滚动条或高度偏差
用 JS 动态锁定视口高度（兼容性更强）
对 iOS Safari 等老版本，纯 CSS 仍有概率失效。可在页面加载时用 JS “冻结”一个稳定的视口高度：
立即学习“前端免费学习笔记（深入）”；
- 在
DOMContentLoaded时读取window.innerHeight，存为变量（如const baseHeight = window.innerHeight;） - 给 body 或 wrapper 设置内联样式：
style="min-height: ${baseHeight}px;" - 监听
resize事件但不更新高度（或仅在高度显著变化时才更新），避免频繁重绘 - 配合
position: fixed页脚，此时整个布局锚定在初始高度上，不再随地址栏进出抖动
补充：避免触发 iOS 滚动穿透和弹性回弹
iOS 的 overscroll 回弹会让 fixed 元素短暂“脱钩”。可加：
-
body { overscroll-behavior: none; }（现代支持良好） - 页脚容器加
transform: translateZ(0);强制硬件加速，提升 fixed 渲染稳定性 - 若页脚内有输入框，聚焦时 iOS 可能推高页面——此时可临时把页脚
display: none，失焦后再恢复
