问题根源在于body默认margin、子元素溢出及box-sizing缺失；须重置body/html的margin/padding，为img设max-width:100%，网格项加overflow:hidden，并全局启用box-sizing:border-box。
直接结论：问题几乎总是出在 body 默认 margin、未约束的子元素溢出，或 box-sizing 缺失——不是靠 overflow-x: hidden 盖住就能解决的。
为什么 overflow-x: hidden 加在 body 上没用？
它只是隐藏滚动条，不阻止内容实际溢出。iOS Safari 里甚至可能因此触发触摸滚动异常；更关键的是，body 默认有 margin: 8px，缩放时这 8px 会被放大渲染，浏览器就认为“视口外还有东西”，于是生成水平滚动区域。
- 别只加
overflow-x: hidden，先清根：必须设body { margin: 0; padding: 0; } - 如果同时设了
padding: 8px（常见误抄），等于人为制造 16px 水平内边距，反而加剧留白 -
html元素也建议同步重置：html { margin: 0; padding: 0; }，避免某些安卓 WebView 的兼容差异
哪些子元素最容易偷偷撑开宽度？
图片、固定高度容器、CSS Grid/Flex 项、GSAP 动画平移后的元素——只要它们没被显式裁剪或约束，就会把“不可见但存在”的部分计入布局宽度。
-
img必须加max-width: 100%; height: auto;，否则原始尺寸会突破父容器 - 网格项（如
.item）加overflow: hidden;，防止动画中x: 300类位移导致隐式溢出 - 全屏视频背景要额外注意：
video父容器需设overflow-x: hidden;，仅靠object-fit: cover不够
盒模型和全局样式要不要统一？
要。缺 box-sizing: border-box 会让 padding 和 border 额外加到 width 外，破坏 100% 宽度预期，尤其在响应式断点切换时容易露馅。
- 推荐在 CSS 开头加全局重置：
* { box-sizing: border-box; } - 避免只给部分元素设
border-box，否则父子计算不一致，小屏下 margin/padding 叠加后极易溢出 - 如果用 Tailwind，确认
@tailwind base已启用，它默认包含该重置
真正难搞的不是某一行代码，而是多个看似无关的细节叠加：body 的 8px margin + 图片没设 max-width + 网格项没 overflow: hidden + 缺 box-sizing。修复时得一并清理，漏掉任意一个，缩放或滚动后白边就又回来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
