100vw 把滚动条宽度也算进去 手机页面多出一条缝

给整块容器写了 width: 100vw，手机上页面底部就多出一条能左右拖的空白，横屏时更明显，桌面却看不出来，这条缝还挺宽。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

html, body { overflow-x: hidden; }
.hero { width: 100%; }
* { outline: 1px solid rgba(255,0,0,.2); }

100vw 的宽度包含纵向滚动条那十几像素，元素实际比可视区更宽，overflow-x 一开就多出一条横向滚动条，桌面和手机都能看出来。排查时先看宽度来源。这一点先确认清楚，后面就不用反复试。

碰到「100vw 横向溢出」这类问题，我习惯先把当前配置原样备份一份，改坏了立刻换回来，不用现场推。把复现步骤压到三条以内，交给同事也能跑出来，才算真的定位清楚。

具体做法是，把 100vw 换成 width: 100%，宽度跟着父容器走，就不会把滚动条算进去；确实要贴满屏幕时，给根元素加 overflow-x: hidden，先把溢出切掉，再排查源头；用 outline 临时给块级元素描边，谁伸到屏幕外一眼就能看出来。

改完照着核一遍，页面不再能左右拖动，底部那条滚动条消失，横屏也不出现多余空白。