最近在检查 WordPress 单篇文章页面时，发现桌面端和移动端都出现了横向滚动条。
由于之前已经遇到过 Gutenberg 全幅区块、面包屑标题过长、归档页广告容器异常等问题，所以这次最开始也以为是区块结构导致的。但经过逐步排查后，最终确认：桌面端横向滚动条主要来自 WPCode 插入的 AdSense 文章中间广告；移动端则是 AdSense 动态生成的 iframe 产生了约 20px 的横向溢出。
这篇文章记录一下完整排查过程和最终解决 CSS。
一、问题现象
问题出现在 WordPress 单篇文章页面。
桌面端表现为：
- 页面底部出现横向滚动条；
- 页面可以左右拖动；
- 文章正文、页头、页脚看起来都被轻微撑宽。
移动端表现为：
- 即使桌面端修复后，移动端仍然存在横向滚动条；
- 页面横向多出了约 20px；
- 肉眼不一定明显，但移动端可以左右滑动。
二、第一次排查：检测溢出元素
首先在浏览器 Console 中执行：
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
.filter(el => el.getBoundingClientRect().right > vw)
.map(el => ({
tag: el.tagName,
class: el.className,
width: Math.round(el.getBoundingClientRect().width)
}))
最开始得到的结果中出现了：
[
{
"tag": "DIV",
"class": "",
"width": 1200
},
{
"tag": "IFRAME",
"class": "",
"width": 1200
}
]
这说明页面中存在一个 1200px 宽的 iframe，以及它外层的 div。
因为页面中存在 Google AdSense 广告，所以第一反应是：可能是广告 iframe 撑出了页面宽度。
三、继续排查 iframe 来源
接着执行：
[...document.querySelectorAll('iframe')]
.filter(el => el.getBoundingClientRect().right > document.documentElement.clientWidth)
.map(el => ({
src: el.src,
width: el.getAttribute('width'),
styleWidth: el.style.width,
rectWidth: Math.round(el.getBoundingClientRect().width),
parentTag: el.parentElement?.tagName,
parentClass: el.parentElement?.className
}))
结果却是空数组：
[]
这说明 iframe 本身不是稳定持续溢出的元素，可能是广告脚本动态调整后，检测时已经发生变化。
于是继续检测页面整体宽度：
({
clientWidth: document.documentElement.clientWidth,
scrollWidth: document.documentElement.scrollWidth,
bodyClientWidth: document.body.clientWidth,
bodyScrollWidth: document.body.scrollWidth
})
桌面端结果类似：
{
"clientWidth": 1518,
"scrollWidth": 1959,
"bodyClientWidth": 1518,
"bodyScrollWidth": 1959
}
这说明页面实际滚动宽度达到了 1959px，比视口宽度 1518px 多出了 441px。
四、中途误判：怀疑是面包屑标题过长
继续排查后，发现页面中有面包屑导航：
首页
建站系统
博客系统
WordPress
Twenty Twenty-Five（2025 主题）
WordPress 归档页 AdSense 报错 availableWidth=0：从横向滚动条到 Gutenberg 区块结构的排查全过程
由于最后一级文章标题比较长，所以一度怀疑是面包屑区块导致横向滚动条。
于是尝试添加：
/* 面包屑过长时自动换行，避免撑出横向滚动条 */
.wp-block-breadcrumbs {
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.wp-block-breadcrumbs * {
min-width: 0;
}
但添加后问题仍然存在。
这说明面包屑不是根因，至少不是这次问题的主要根因。
五、最终确认桌面端根因：WPCode 插入的文章中间广告
随后我在 WPCode 中逐个禁用广告位，最终发现：
禁用以下 3 个广告位后，桌面端横向滚动条消失：
[AdSense] 内嵌广告 - 单篇文章中间广告（第 4 段后）
[AdSense] 内嵌广告 - 单篇文章中间广告（第 10 段后）
[AdSense] 内嵌广告 - 单篇文章中间广告（第 20 段后）
这基本可以确认：
桌面端横向滚动条不是主题本身导致的，而是文章正文中间插入的 AdSense 广告容器撑出了页面。
六、桌面端解决 CSS
最终针对单篇文章正文中的 AdSense 添加如下 CSS：
/* 限制单篇文章正文里的 AdSense 不撑出页面 */
.single .entry-content .adsbygoogle,
.single .entry-content ins.adsbygoogle,
.single .entry-content iframe {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
这段 CSS 的作用是：
- 限制正文中的 AdSense 容器最大宽度不超过正文区域；
- 限制 iframe 不超过父容器；
- 使用
box-sizing: border-box避免 padding、border 继续撑宽； - 使用
!important覆盖 AdSense 动态生成的部分内联样式。
添加后，桌面端横向滚动条消失。
七、移动端仍然存在横向滚动条
虽然桌面端修复了，但移动端仍然存在横向滚动条。
继续在移动端执行：
({
clientWidth: document.documentElement.clientWidth,
scrollWidth: document.documentElement.scrollWidth,
diff: document.documentElement.scrollWidth - document.documentElement.clientWidth,
bodyClientWidth: document.body.clientWidth,
bodyScrollWidth: document.body.scrollWidth
})
得到结果：
{
"clientWidth": 412,
"scrollWidth": 432,
"diff": 20,
"bodyClientWidth": 412,
"bodyScrollWidth": 432
}
这说明移动端页面只多出了 20px。
继续检测溢出元素：
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
.map(el => {
const r = el.getBoundingClientRect();
return {
tag: el.tagName,
class: String(el.className),
id: el.id,
width: Math.round(r.width),
left: Math.round(r.left),
right: Math.round(r.right),
text: (el.innerText || '').slice(0, 80)
};
})
.filter(x => x.right > vw + 1 || x.left < -1)
.sort((a, b) => b.right - a.right)
.slice(0, 30)
结果中出现：
[
{
"tag": "DIV",
"id": "aswift_1_host",
"width": 412,
"left": 20,
"right": 432
},
{
"tag": "IFRAME",
"id": "aswift_1",
"width": 412,
"left": 20,
"right": 432
},
{
"tag": "DIV",
"id": "aswift_2_host",
"width": 412,
"left": 20,
"right": 432
}
]
这就比较明确了。
移动端视口宽度是 412px，而 AdSense 动态生成的 iframe 宽度也是 412px，但它从 left: 20px 开始，所以右侧正好多出 20px。
也就是说，移动端横向滚动条来自 AdSense 动态 iframe 的轻微偏移。
八、为什么没有继续精确修 aswift 容器
理论上可以继续针对：
div[id^="aswift_"][id$="_host"],
iframe[id^="aswift_"]
做更精确限制。
但 AdSense 的 iframe、容器 ID 都是动态生成的，后续可能变化。并且广告脚本经常会在页面加载后再次调整尺寸和位置。
因此，与其对某几个动态 ID 做过度修补，不如在移动端做一个更稳的兜底处理。
九、最终移动端兜底 CSS
最终使用：
/* =========================================================
* 移动端横向滚动条兜底修复
* 原因：AdSense 动态 iframe 可能产生 20px 左右偏移
* 处理：移动端禁止页面横向溢出
* ========================================================= */
@media (max-width: 768px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.wp-site-blocks {
max-width: 100%;
overflow-x: clip;
}
}
这里没有直接在全站所有端隐藏横向溢出，而是只在移动端处理。
原因是：
- 桌面端已经通过限制正文广告容器解决；
- 移动端只剩 AdSense 动态 iframe 的 20px 轻微溢出；
- 移动端用户体验优先，不应该允许页面左右滑动；
overflow-x: hidden是针对广告脚本副作用的兜底方案。
十、最终完整 CSS
最终保留的 CSS 如下：
/* 限制单篇文章正文里的 AdSense 不撑出页面 */
.single .entry-content .adsbygoogle,
.single .entry-content ins.adsbygoogle,
.single .entry-content iframe {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
/* =========================================================
* 移动端横向滚动条兜底修复
* 原因：AdSense 动态 iframe 可能产生 20px 左右偏移
* 处理：移动端禁止页面横向溢出
* ========================================================= */
@media (max-width: 768px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.wp-site-blocks {
max-width: 100%;
overflow-x: clip;
}
}
十一、这次排查的结论
这次问题给我的几个经验是：
第一，看到横向滚动条时，不要马上怀疑主题。
在 WordPress 站点中，广告、第三方 iframe、外部脚本都可能动态改变页面宽度。
第二，scrollWidth 和 clientWidth 是判断横向溢出的关键。
只要 scrollWidth > clientWidth，就说明页面确实被撑宽了。
第三，AdSense 在移动端确实可能带来布局副作用。
尤其是响应式广告、自动广告、正文中间广告、锚定广告，都可能生成动态 iframe，从而造成轻微溢出。
第四，主题编辑器只能解决结构问题，不能完全控制 AdSense 动态 iframe。
如果是 Gutenberg 区块全幅、Group 对齐、面包屑不换行，主题编辑器可以解决。
但如果是 AdSense 运行时生成的 iframe 偏移，最终往往还是需要额外 CSS 兜底。
第五，广告收益和页面体验需要平衡。
技术博客读者对页面体验比较敏感，如果广告导致页面横向滚动、布局抖动、阅读体验变差，那么即使广告带来一点收入，也可能不值得。
十二、后续优化方向
后续可以继续观察：
- 是否只保留桌面端文章中间广告；
- 移动端是否减少正文中间广告；
- 是否关闭部分自动广告；
- 是否只保留文章顶部广告和少量正文广告；
- 是否继续用 WPCode 管理广告位；
- 是否为每个广告位统一添加外层容器。
比较理想的广告策略是：
桌面端可以适当保留正文中间广告；
移动端则尽量减少广告数量，优先保证阅读体验。
毕竟对于技术博客来说，用户体验、页面稳定性和长期信任，可能比短期多一点广告收入更重要。
技术博客运营与商业化咨询服务
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、性能优化、多语言运营、Google SEO 以及广告变现等方向。所有经验均来自真实网站运营过程中的持续实践与验证。如果你正在运营个人博客、技术网站或独立开发者项目，希望获得更多自然流量并探索网站商业化路径，欢迎联系我交流。
适合以下用户：
✅ 技术博客运营者
✅ 独立开发者与个人站长
✅ SaaS 产品官网运营团队
✅ 希望拓展海外流量的网站运营者
✅ 希望通过网站获得收入的内容创作者
服务内容：
✅ WordPress 性能优化
✅ SEO 优化咨询
✅ 多语言网站建设
✅ 广告收益优化
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：博客运营咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com
发表回复