移动端页面左右滑动的主因是 body 默认 margin: 8px，需设为 margin: 0; padding: 0; box-sizing: border-box；子元素溢出、图片/文本不换行、iOS 微信中 padding 导致宽度超限也需分别处理。
body 默认 margin 是罪魁祸首
移动端页面能左右滑动，最常见原因是 body 元素自带的默认外边距。Chrome、Safari、Firefox 都会给 body 加 margin: 8px，左右各 8px —— 看似微小，但在缩放或某些 iOS WebView 渲染下会被放大，直接触发水平滚动条。
别用 overflow-x: hidden 掩盖它，那只是藏起滚动条，内容依然溢出，还可能干扰 touch 事件。
正确做法是彻底清空：
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
注意：padding: 8px 是严重错误写法，会人为制造 16px 水平内边距，让问题更糟。
立即学习“前端免费学习笔记（深入）”；
.item 或容器内部溢出必须裁剪
即使 body 清干净了，子元素仍可能撑破视口：比如固定高度的 .item 里放了未约束的 <img>，或用了 GSAP 平移动画（如 x: 300）但没限制溢出范围。
浏览器会把动画中“视觉外”的部分计入布局宽度，导致隐式横向溢出。
给关键容器加裁剪控制：
.item {
overflow: hidden;
box-sizing: border-box;
}
如果用的是 Grid 或 Flex 容器，也建议统一加上 overflow: hidden，尤其当子项含图片、文字块或绝对定位元素时。
文本和图片不换行会偷偷撑宽
长英文单词（如 responsiveness）、未设 max-width 的图片、或 white-space: nowrap 的标题，都会在窄屏下形成超宽内联块，突破父容器边界。
这类溢出不会在 DOM 树顶层显现，body { overflow-x: hidden } 完全无效。
全局防御性写法：
body {
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
}
img {
max-width: 100%;
height: auto;
}
对关键文本容器（如 .content、h1）额外加 max-width: 100% 和 padding: 0 1rem，留出安全边距。
iOS 微信小程序要特别防 padding/border 溢出
在 iOS 微信小程序里，width: 100% + padding: 20px 这类组合极易触发左右滑动白屏——安卓和开发者工具常不暴露，但真机上一滑就露底色。
根本原因是标准盒模型下，实际宽度 = 100% + padding × 2，超出视口。
两个必须动作：
- 全局启用
box-sizing: border-box（包括html和body） - 所有带
padding或border的容器，显式写width: 100%并确认其父级无额外 margin/padding
临时排查技巧：真机调试时，在 DevTools 中选中 html → Computed → 查 scrollWidth 是否大于 clientWidth；再逐个关闭子元素或加 background: red 快速定位“撑宽元凶”。
