WordPress移动端横向溢出问题求助：overflow-x设置无效

AI 小北

2026-7-24

WordPress首页横向溢出问题解决方案

排查方向与修复步骤

同时锁定html和body的横向溢出
单独给html设置属性有时无效，需同时限制body的溢出范围，强制约束视口宽度：
```
html, body {
  overflow-x: clip !important;
  width: 100%;
  max-width: 100vw;
  position: relative;
}
```
定位并修复具体溢出元素
用浏览器移动端调试模式逐个排查页面元素：
- 找是否存在width: 100%+、min-width: 1200px这类固定宽度过大的元素
- 检查绝对/固定定位元素的左右偏移值是否超出视口
- 排查元素的内边距、外边距是否导致总宽度溢出（可通过box-sizing: border-box统一盒模型）
  找到问题元素后针对性修改，示例：
```
/* 修复某过宽模块 */
.overflow-section {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}
```
优化媒体查询或直接全局设置
部分手机视口宽度可能不在你设置的断点范围内，可直接全局设置（不影响桌面端正常布局）：
```
html, body {
  overflow-x: clip !important;
  max-width: 100vw;
}
```
检查viewport元标签
确认主题<head>中存在正确的视口标签，错误配置会导致移动端视口计算异常：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```