旧版safari将滚动条宽度计入100vw导致横向滚动条，应改用100%并设置html、body{width:100%;max-width:100%}，图片svg等加max-width:100%，且overflow-x:hidden需作用于html而非body。

为什么100vw在旧版Safari里会撑出横向滚动条

不是你写错了，是 Safari（特别是 iOS 15 及更早、macOS Monterey 及之前）把滚动条宽度（约 15px）算进了 100vw。比如视口实际宽 375px，但 100vw 被解析成 390px——多出来的部分直接让 body.scrollWidth > window.innerWidth，触发横向滚动条。这个现象在缩放 90%/110% 或 DPR=2 设备上更明显，控制台跑 $$('body')[0].scrollWidth - window.innerWidth 常返回 15.2 这类非整数值。

别用 overflow-x: hidden 直接压在 body 上

它在 Safari 里基本无效：根滚动容器是 html，不是 body。给 body 加这个声明，既不阻止横向溢出，还可能干扰原生弹性滚动行为。真正起作用的是：

• html { overflow-x: hidden; } —— 必须写在 html 上
• 但这只是掩盖症状，不是修复根源；JS 滚动监听、position: fixed 元素仍可能错位

用 100% 替代 100vw，并重置 html 和 body 宽度

100% 是相对于父容器（即 html）计算的，而默认 html 宽度就是视口减去滚动条宽度，天然避开了 100vw 的陷阱。配合显式约束可彻底切断溢出链：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• html, body { width: 100%; max-width: 100%; }
• body { box-sizing: border-box; } —— 防止 padding 把宽度撑超
• 所有 position: fixed 或 absolute 元素，避免同时设 left 和 right；若需右偏移，改用 transform: translateX()，不参与盒模型计算

图片、SVG、伪元素必须加 max-width: 100%

它们是横向溢出最隐蔽的来源：原始尺寸大于视口时，100% 不生效，100vw 又会吃滚动条宽度。强制兜底：

• img, svg, [class*="icon"]::before { max-width: 100%; height: auto; }
• 第三方 UI 库里的弹层、提示框常漏掉这句，要单独检查
• 尤其注意 input[type="number"] 默认内边距，在 Safari 里会悄悄加宽容器

低版本 Safari 对盒模型计算极其敏感，一个 right: -5px、一张没设 max-width 的图、或 html 上残留的 width: 100vw，都可能叠加出横向溢出。修复必须从全局宽度源头（html）开始，逐层收敛，而不是在子元素上打补丁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！