应使用width: 100%替代100vw，因其基于父元素内容区计算，天然对齐document.documentelement.clientwidth，避开滚动条宽度干扰；仅在必须锚定物理视口的极少数场景（如canvas初始化）才考虑calc(100vw - var(--scrollbar-width))或100dvw。
100vw 包含滚动条宽度，而移动端总有 Y 轴滚动条
100vw 的基准是 window.innerWidth，它把垂直滚动条的宽度（Windows 常为 17px，macOS 隐藏时仍参与计算）算进去了；但用户真正能看见的视口内容宽度是 document.documentElement.clientWidth，它已自动扣除滚动条。只要页面内容高度超过视口、触发 Y 轴滚动条，100vw > clientWidth 就成立——哪怕只多出 1px，浏览器就会渲染横向滚动条。
为什么 body 上设 overflow-x: hidden 没用？
移动端浏览器的根滚动容器是 html 元素，不是 body。给 body 加 overflow-x: hidden 对根级横向溢出完全无效，还可能干扰 iOS Safari 的弹性滚动行为。必须写：
html { overflow-x: hidden; }
但这只是压制症状，不是修复根源——如果盒模型本身超宽，fixed 元素、sticky 导航、JS 滚动监听都可能异常。
哪些地方最容易误用 100vw？
- Tailwind 的
w-screen直接套在根容器或弹窗遮罩层上 - 轮播组件写成
.slide { width: 100vw; }，Y 滚动出现后立刻右溢出 - 绝对定位元素同时设
right: 0和transform，Safari 下会错误计入滚动条宽度 - UI 库内部 JS 动态插入的元素带
100vw宽度，你改 CSS 也覆盖不了
真正该用什么替代？
绝大多数场景下，width: 100% 就是正确解：它基于父元素内容区计算，天然对齐 clientWidth，不依赖 JS、无兼容性问题、不随系统设置漂移。只有极少数必须锚定物理视口尺寸的场景（如 canvas 初始化、某些动画定位），才考虑 calc(100vw - var(--scrollbar-width)) 或现代 100dvw（注意 Safari 当前不支持）。最麻烦的从来不是怎么修，而是没意识到：所谓“必须用 100vw”，往往只是没想清楚“要对齐的是什么”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
