移动端网站右侧出现额外边距问题求助

问题背景 #

在移动端访问网站时，页面右侧存在可滚动的额外空白空间，影响移动端浏览体验。

核心成因分析 #

这类问题本质是页面元素总宽度超出了移动端视口范围，触发横向滚动，常见具体原因包括：

• Viewport配置缺失/错误：页面未添加<meta name="viewport" content="width=device-width, initial-scale=1.0">标签时，移动端浏览器会默认以桌面端宽度（如980px）渲染页面，导致视口适配失效，出现横向空白。
• 固定宽度元素未适配：部分块级元素设置了桌面端的固定宽度（如width: 1200px），在移动端视口宽度不足时，元素会直接撑出横向滚动区域。
• 盒模型溢出：使用width: 100%的元素同时添加了padding或border，但未启用box-sizing: border-box，导致元素总宽度 = 100% + 内边距 + 边框，超出视口。
• 浮动布局未清理：浮动元素未正确清除浮动，导致父容器宽度被撑开，超出视口范围。

针对该网站的排查与修复建议 #

1. 检查Viewport标签：确认HTML头部是否存在正确的Viewport配置，若缺失直接添加该标签，让页面自适应移动端视口。
2. 全局设置盒模型：在CSS开头添加以下代码，避免内边距和边框导致的宽度溢出：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

3. 替换固定宽度：排查所有设置了固定宽度的容器、卡片元素，将width改为max-width: 100%，或通过媒体查询在移动端调整元素宽度。
4. 清理浮动布局：对使用浮动的父容器添加overflow: hidden，或使用伪元素清除浮动：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者meruvu likith