移动端网页右侧出现垂直空白 已尝试overflow-x:hidden无效求解决方案

• 修正CSS优先级与基础盒模型规则
  你之前添加的样式未生效大概率是优先级不足、缺少全局盒模型声明，替换为如下代码：

/* 全局统一盒模型，避免宽度+内边距导致溢出 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100vw;
  max-width: 100%;
  overflow-x: hidden !important;
}

用100vw替代100%可以更精准匹配设备视口宽度，加!important可强制覆盖原有冲突规则。

• 定位溢出视口的具体元素
  打开浏览器开发者工具控制台，临时添加如下全局样式，所有超出视口的元素会被红色边框标出，定位后调整对应元素的宽度、边距即可：

* {
  outline: 1px solid red !important;
}

常见溢出场景包括：元素写死了大于移动端视口宽度的固定值、图片/行内元素未做响应式限制、浮动元素未清除浮动导致宽度溢出、负margin值超出视口范围。

• 校验viewport元标签配置
  检查HTML头部的viewport标签配置是否正确，错误配置会导致视口宽度计算异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 排查媒体查询规则冲突
  由于站点采用移动优先开发，确认所有桌面端媒体查询均使用min-width作为断点条件，没有误将移动端样式写入桌面端媒体查询，也未出现断点值小于常规移动端视口宽度的错误。

内容的提问来源于stack exchange，提问作者Digital Impact