移动端横向滚动主因是元素宽度超 viewport 导致 body 撑宽；需检查 body 宽度、重置 margin/padding、处理 nowrap 文本、设置图片 max-width、用 outline 定位溢出元素，慎用 overflow-x: hidden，优先加 touch-action: pan-y 防误滑，Flex/Grid 子项加 min-width: 0 防撑开。
检查 body 或根容器是否意外撑宽
移动端横向滚动最常见的原因是某个元素宽度超出了 viewport，导致 body 被拉宽。浏览器会自动给 body 添加水平滚动条，哪怕你没写 overflow-x: scroll。
先打开开发者工具，选中 <body>，看右侧“Computed”面板里的 width 值——如果明显大于屏幕宽度（比如 420px 设备上显示 456px），就说明有内容溢出。
- 检查是否有未重置的
margin或padding（尤其是body、html默认外边距） - 留意
white-space: nowrap的文本容器，它会让长单词/URL 不换行，直接撑宽父级 - 确认所有图片、表格、
iframe是否设置了max-width: 100%和height: auto - 用
outline: 1px solid red快速高亮所有块级元素，一眼看出哪个跑出了视口
overflow-x: hidden 不是万能解，慎用
直接在 body 或 html 上加 overflow-x: hidden 看似能消灭滚动条，但只是掩盖问题：被截断的内容无法访问，可能影响可访问性（如屏幕阅读器）和交互区域（如按钮被切掉）。
更稳妥的做法是定位并修复溢出源。但如果必须临时压制，优先加在 body 上，而非 html ——某些 Android 浏览器对 html 的 overflow 处理不一致。
立即学习“前端免费学习笔记（深入）”；
body {
overflow-x: hidden;
}注意：overflow-x: hidden 不会阻止 touchmove 惯性滑动触发的短暂横向位移，仍需配合 touch-action: pan-y（见下一条）。
防止手指误滑触发横向滚动
即使布局没溢出，用户快速上下滑动时，手指轻微偏斜也可能触发 scrollLeft 变化，尤其在 iOS Safari 中明显。
- 给根容器（如
body或最外层<div>）加touch-action: pan-y，明确告诉浏览器只响应纵向手势 - 避免在
body上监听touchstart并调用preventDefault()，这会禁用所有默认触摸行为（包括缩放、点击） - 若使用轮播或滑动组件，确保其容器设置了
overscroll-behavior-x: contain，防止滚动穿透到父级
用 min-width: 0 修复 Flex/Grid 子项溢出
Flex 容器里的子元素（尤其含图片或文本）默认有 min-width: auto，会拒绝收缩到内容最小宽度以下，导致父容器被撑开。
典型场景：一个 display: flex 的导航栏里放了几个 <img>，某张图原始宽 300px，在窄屏上直接突破视口。
.nav {
display: flex;
}
.nav img {
min-width: 0; /* 关键：允许图片压缩 */
max-width: 100%;
height: auto;
}同理适用于 display: grid 的子项，或嵌套的 flex 容器。只要子项可能溢出，就考虑加 min-width: 0 或 overflow: hidden 配合 text-overflow: ellipsis。
真正难缠的溢出往往藏在第三方组件、内联样式或 CSS-in-JS 动态生成的规则里。建议从 body 宽度入手，逐层向上查父容器的 width 和 flex-basis，比盲目加 overflow 更可靠。
