100vw在旧版安卓webview和ios 15及更早safari中因将滚动条宽度计入计算值导致横向溢出，应改用100%并配合html、body宽度锁定与@supports特性查询兜底。
100vw 在部分安卓机型（尤其是华为、小米旧版 WebView）和 iOS 15 及更早 Safari 中会撑出横向滚动条，根本原因不是“不支持”，而是它把滚动条宽度（约 15px）算进了计算值——这不是 bug，是这些浏览器对视口单位的实现缺陷。
为什么旧版 Safari/WebView 把 100vw 当成「视口宽 + 滚动条宽」
比如设备物理宽度为 375px，但滚动条占 15px，Safari 就把 100vw 解析成 390px。结果：body.scrollWidth > window.innerWidth，强制触发横向溢出。这个现象在 DPR=2 的设备上更明显，$$('body')[0].scrollWidth - window.innerWidth 常返回 15.2 这类非整数值。
关键点在于：这个行为只发生在根滚动容器（html）未显式约束宽度时，且 overflow-x: hidden 加在 body 上完全无效。
-
html是真正的根滚动容器，必须对它设overflow-x: hidden -
100%是相对父容器（即html）计算的，天然避开滚动条宽度陷阱 - 所有
position: fixed或absolute元素，避免同时设left和right；右偏移改用transform: translateX() -
img、svg、含icon类名的伪元素，必须加max-width: 100%，否则原始尺寸超视口时直接溢出
用 100% 替代 100vw 的安全写法
不能简单把 width: 100vw 改成 width: 100% 就完事——body 默认 display: block，但它的父容器 html 没有显式宽度，100% 就失去参照。
必须从源头收敛：
-
html, body { width: 100%; max-width: 100%; }—— 锁死根级宽度上限 -
body { box-sizing: border-box; }—— 防止 padding 把宽度撑超 - 所有全宽容器（如
.header、.banner）统一用width: 100%，别混用100vw - 第三方 UI 库里的弹层、轮播图、输入框，单独检查是否漏了
max-width: 100%
@supports 不是可选项，是保命线
即使你写了 width: 100%，某些极端场景（如 input[type="number"] 在 Safari 里自带内边距、right: -5px 这类微小偏移）仍可能叠加出横向溢出。此时靠 @supports 隔离现代特性最稳妥：
错误写法：.box { width: 100vw; width: 100%; } → 老浏览器按顺序解析，100vw 优先生效，溢出照旧
正确写法：
`.box { width: 100%; }
@supports (width: 100vw) {
.box { width: 100vw; }
}`
这样老浏览器跳过整个 @supports 块，只走 100%；新浏览器则用更精确的 100vw。注意：这个 @supports 查询本身在 iOS 14.5+ 才稳定支持，所以它真正兜底的是「已知能正确解析 100vw 的环境」，不是所有新浏览器。
复杂点在于：修复必须从 html 开始逐层收敛，而不是在子元素上打补丁。一个没设 max-width: 100% 的图片、一行残留的 100vw、或 html 上多写的 width: 100vw，都可能让整个方案失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
