移动端100%宽度组件白边主因是viewport缺失与body默认margin叠加，需添加viewport meta标签、重置html/body边距、优先用100%而非100vw、全局设box-sizing:border-box并规范图片样式。
移动端100%宽度组件出现白边，90%以上是 viewport 缺失 + body 默认 margin 叠加导致的，不是图片或布局写错了。
必须加 viewport meta 标签
没有这行，iOS Safari 和部分安卓浏览器会按 980px 虚拟视口渲染，width: 100% 实际参考的是那个“假宽度”，必然右侧溢出留白。
在 里确保有：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
注意：user-scalable=no 不是必须，但能防止双击缩放干扰测试；如果项目需要缩放，至少保留前两项。
重置 body 和 html 的默认边距
默认有 margin: 8px（各浏览器略有差异）， 也可能带滚动条预留空间。这两者叠加 100% 或 100vw 就会超宽。
直接全局清空：
html, body {<br> margin: 0;<br> padding: 0;<br> height: 100%; /* 防止 flex 或绝对定位父容器高度塌陷 */<br>}
别只写 body { margin: 0 } —— html 层的 margin/padding 在某些安卓 WebView 下也会参与计算。
慎用 100vw，优先用 100%
100vw 是“严格等于视口宽度”，但它包含滚动条宽度（通常 12–17px）。当页面内容触发纵向滚动条时，100vw 仍按含滚动条的宽度算，导致元素实际比可视区还宽，右侧硬生生挤出白边。
更稳妥的做法：
- 用
width: 100%替代width: 100vw，它参考的是父容器 content 区，不受滚动条影响 - 若必须铺满视口（比如全屏背景），改用
width: 100dvw（dvw是动态视口单位，排除滚动条）——但注意 iOS Safari 15.4+ 才支持 - 实在要用
100vw，补一句overflow-x: hidden在body上（仅作兜底，不推荐依赖）
检查 box-sizing 和图片行为
即使宽高设对了，inline 元素，会因 baseline 留白、且 max-width: 100% 参考行框而非父容器，照样撑出白边。
关键补丁：
- 全局启用
box-sizing: border-box：* { box-sizing: border-box; }<br>*::before, *::after { box-sizing: border-box; } - 所有响应式图片加：
img {<br> max-width: 100%;<br> height: auto;<br> display: block;<br>} - 避免给图片父容器设
padding后还用width: 100%—— 检查 computed styles 确认最终 width 是否真等于预期 content 宽度
真正容易被忽略的是：白边可能来自嵌套层级中某个没被 reset 的祖先元素（比如第三方 UI 组件的 wrapper），而不是你写的那块代码。打开开发者工具，逐层往上 hover 查看 computed margin/padding/width，比反复调样式更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
