移动端 width: 100% 撑破视口的根本原因是 html/body 默认 margin 与 box-sizing 未重置，叠加 viewport 设置不当、vw 单位在 ios 的兼容性问题及 flex 子项 min-width:auto 溢出所致。
移动端 width: 100% 为什么经常撑破视口
根本原因不是 CSS 写错了，而是浏览器默认给 和 加了 margin，再加上未重置的 box-sizing，导致实际宽度超出 viewport。iOS Safari 尤其敏感，哪怕多出 1px 都可能触发横向滚动条。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制重置根级边距：
html, body { margin: 0; padding: 0; } - 统一盒模型：
* { box-sizing: border-box; }（注意：不要只写html或body，要覆盖所有元素） - 检查是否有未设
max-width: 100%的图片或嵌入内容——它们默认是width: auto，在高分辨率屏上容易溢出
viewport meta 标签漏配或配错的典型表现
常见错误是写了 <meta name="viewport" content="width=device-width"> 却没加 initial-scale=1，结果 iOS Safari 会按 980px 渲染再缩放，导致 CSS 像素和设备像素错位，100vw 算不准。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- 避免用
width=375这类固定值——不同机型宽度不同，且横屏时直接失效 - 如果项目需支持双击缩放，去掉
user-scalable=no，但务必补上maximum-scale=1防止无限放大撑破布局
vw 单位在 iOS 上的兼容性陷阱
100vw 理论上等于视口宽度，但在 iOS Safari 中，地址栏显示/隐藏会动态改变视口高度，而 vw 不随之更新，更糟的是某些版本里 vw 会把滚动条宽度也算进去，导致实际宽度小于预期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关键容器慎用
width: 100vw，优先用width: 100%+box-sizing: border-box - 若必须用
vw（比如全屏轮播），加 JS 补偿：document.documentElement.style.setProperty('--vw', `${window.innerWidth / 100}px`);，然后用width: calc(var(--vw) * 100) - 注意 Android Chrome 从 v76+ 支持
100dvw（动态视口宽），但 iOS 目前仍不支持dvw
flex 容器内子项溢出却不换行的调试要点
写 display: flex 后，子项明明设了 flex: 0 0 50%，却还是横向挤出屏幕——大概率是父容器没设 overflow: hidden，或者子项内部有未约束的 inline 元素（如图片、span）撑开最小宽度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给 flex 容器加
min-width: 0;
（解决子项默认min-width: auto导致的溢出） - 给可能撑开的子项加
min-width: 0; overflow: hidden;
- 检查是否误用了
white-space: nowrap，尤其在按钮、标签类组件里，它会让文本拒绝折行，强行拉宽容器
最常被忽略的是嵌套的第三方组件——比如地图 SDK、视频播放器、富文本编辑框，它们内部样式往往没做移动端盒模型隔离，需要手动加 max-width: 100% !important 和 height: auto !important 拦截。
