手机端横向滚动条主因是元素撑宽视口，如子元素固定宽、图片未限宽、伪元素溢出或box-sizing混用；必加三规则：html{overflow-x:hidden}、body{margin:0}、媒体元素max-width:100%。
手机端出现横向滚动条的常见原因
绝大多数情况不是因为你写了 overflow-x: hidden 就能解决，而是页面里某个元素悄悄撑开了视口宽度。最常踩的坑是：父容器没设 max-width: 100%，子元素用了固定宽（比如 width: 1200px）、大尺寸图片没限制、或伪元素（::before/::after）意外溢出。
另一个高频原因是 box-sizing 混用——比如父容器用了 border-box，但子元素用了默认的 content-box，加上 padding 或 border 后实际宽度就超了 100%。
必须加的三项基础 CSS 规则
这三条不是“可选优化”，而是响应式布局的底线配置，缺一不可：
-
html { overflow-x: hidden; }—— 防止根元素本身溢出（iOS Safari 特别容易在这里漏掉） -
body { margin: 0; }—— 浏览器默认margin: 8px，在窄屏下直接造成横向滚动 -
img, video, iframe { max-width: 100%; height: auto; }—— 所有流媒体内容必须约束宽度，否则无视容器
flex / grid 布局中 overflow 失效的典型场景
当你用 display: flex 或 display: grid，又给子项设置了 min-width: 0（或 min-width: auto），却忘了父容器本身可能被子项撑开 —— 这时候加 overflow-x: hidden 也没用，因为溢出发生在 flex/grid 容器内部计算阶段。
立即学习“前端免费学习笔记（深入）”；
正确做法是给父容器加 min-width: 0（对 flex 容器）或 min-inline-size: 0（对 grid 容器），强制它参与收缩。常见错误写法：.container { display: flex; overflow-x: hidden; } → 缺少 min-width: 0，失效。
调试时优先检查的三个地方
别急着改 CSS，先打开手机 Chrome DevTools 的「Toggle device toolbar」，然后按以下顺序查：
- 用「Select an element」点选 body，看 computed 标签页里
width是否 >device-width - 检查是否有元素的
transform: translateX(...)或left: 200px等脱离文档流的偏移，它们不触发父容器重排，但会真实造成溢出 - 运行
getComputedStyle(document.body).width和window.innerWidth对比，差值大于 1px 就说明有隐藏撑开源
真正难搞的往往不是样式本身，而是某个第三方组件偷偷加了 white-space: nowrap 或没处理好字体加载时的 layout shift —— 这类问题得靠逐层 overflow-x: hidden 缩小范围定位。
