根本原因是100vw包含滚动条宽度（约17px）而100%不包含，导致body实际宽度超视口触发ios safari弹性回弹抖动；需用scrollwidth > clientwidth验证，并将overflow-x: hidden设在html上。
为什么 width: 100vw 在移动端会引发左右抖动
根本原因不是 vw 计算错了，而是 100vw 包含了滚动条宽度（通常 ≈17px），而 100% 不包含。当页面内容刚好撑满、又因某些元素（比如未设 max-width: 100% 的图片、input[type="number"] 默认内边距、绝对定位溢出）导致 body 实际宽度 > 视口时，浏览器就会悄悄启用横向滚动能力——哪怕滚动条不可见，也会触发 iOS Safari 的弹性回弹逻辑，造成松手后“咔哒”一下的左右抖动。
如何快速确认是不是滚动条惹的祸
别猜，用开发者工具直接验证：
- 打开 Chrome 或 Safari（iOS 16.4+）的「检查元素」，选中
html或body元素 - 看右侧「Computed」面板里的
width值：如果显示为376px（iPhone SE 视口是 375px），那多半就是多出了 1px 滚动条占位 - 临时加一句
outline: 1px solid red到body和它的直接子元素，能一眼看出谁“偷偷宽了一点” - 在控制台运行
document.documentElement.scrollWidth > document.documentElement.clientWidth，返回true就说明存在隐性横向溢出
overflow-x: hidden 加在 body 还是 html 上
必须加在 html 上才真正起作用。因为移动端浏览器的根滚动容器是 html，不是 body；给 body 加 overflow-x: hidden 对根级横向滚动毫无约束力，还可能干扰 iOS Safari 的原生弹性滚动行为。
正确写法是：
html {
overflow-x: hidden;
}
但注意：这只是压制症状，不是解决病因。如果盒模型本身超宽，JS 滚动监听、fixed 定位元素、甚至 position: sticky 都可能表现异常。
fixed 元素内部溢出也会造成“假抖动”
即使 html 宽度正常，一个 position: fixed 的弹层如果内容高度超过视口、且没设 overflow-y: auto 或 max-height，用户向上滚动时它会自己触发局部滚动条——这种卡顿常被误认为是整页抖动。
- 检查所有
position: fixed容器，确保其height或max-height受控 - 内部内容若可滚动，显式设置
overflow-y: auto，并搭配-webkit-overflow-scrolling: touch（iOS 旧版需） - 避免在 fixed 元素里用
width: 100vw—— 它仍会吃滚动条宽度，导致内部计算偏差
最易被忽略的一点：抖动往往不是单一原因，而是 100vw + fixed 溢出 + 未重置的表单内边距三者叠加的结果。排查时得一层层关掉样式，而不是一口气全压上 overflow-x: hidden。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
