必须同时设置 html { overflow-x: hidden } 和 body { margin: 0 }，并修复图片、flex 子项、100vw、定位元素等导致的宽度溢出源，才能彻底解决 ios safari 横向滚动问题。
直接给 body 加 overflow-x: hidden 不安全——iOS Safari 的根滚动容器是 html，不是 body；而且它只“盖盖子”，不解决内容撑宽的根源问题。
必须同时控制 html 和 body 的溢出行为
移动端 Safari 会把 html 当作主滚动容器，body 上的 overflow-x: hidden 完全无效。而 body 默认有 margin: 8px，左右合计 16px 溢出，直接触发横向滚动。
-
html必须设overflow-x: hidden（iOS / Safari 生效的关键） -
body必须重置margin: 0，否则默认边距就是硬性溢出源 - 两者缺一不可，只写一个在部分设备上必然失效
先堵住溢出源头，再加 overflow-x: hidden
overflow-x: hidden 是兜底手段，不是解决方案。真正要修的是让内容宽度 ≤ 视口宽度。常见溢出点：
- 图片/iframe 没设
max-width: 100%，原始尺寸强行突破容器 -
.row（Bootstrap）等负边距容器未被.container包裹，margin-left: -15px推出视口 - 长 URL 或代码块没加
overflow-wrap: break-word，且父容器未设max-width: 100% - Flex/Grid 子项默认
min-width: auto，拒绝压缩——需显式加min-width: 0
避免用 100vw，改用 100% 或 100dvw
width: 100vw 在 Windows 下会包含垂直滚动条宽度（约 17px），导致实际比视口宽。Safari 对小数像素计算也更敏感，容易多出零点几像素溢出。
- 用
width: 100%更稳妥，它基于父容器可用宽度计算 - 现代方案可用
width: 100dvw（dynamic viewport width），自动排除滚动条占位 - 若必须用 vw 单位，搭配
max-width: 100%双保险
定位元素的 right 值极易引发隐性溢出
position: absolute 或 fixed 元素若同时设了 left 和 right，浏览器会按 width = 包含块宽 − left − right 反向推算。一旦 right 是负值（如 right: -20px），算出来就是超宽。
- 用 DevTools 筛选器搜
[style*="right"]，重点检查是否和left并存 - 把
right: -Xpx改成transform: translateX(Xpx)，后者不参与盒模型计算 - 若必须用
right，确保其为非负值，且不与left冲突
最危险的不是写错某一行 CSS，而是以为加了 overflow-x: hidden 就万事大吉——它掩盖了真实布局缺陷，且在 Safari 中连掩盖都做不到。真正安全的写法，永远是：先用 outline 或 scrollWidth > clientWidth 定位溢出源，再逐个修复，最后用 html { overflow-x: hidden } 收尾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
