最近在检查博客移动端显示效果时，我偶然发现一个问题：一些早期发布的旧文章，在手机端查看时，文章中的图片没有正常居中缩放，甚至会撑破正文区域。
这个问题并不是所有页面都有，而是集中出现在 2014、2017 年左右的一些旧文章中。由于我的博客已经运行多年，历史文章数量较多，因此一开始我有点担心：网站中是否还存在大量类似的移动端布局问题？
这篇文章记录一次完整的排查过程：从移动端截图抽样、在线工具测试，到最终定位为经典编辑器旧文章中的 wp-caption 固定宽度问题，并通过 CSS 兜底修复。
一、问题现象：旧文章图片在移动端没有正常适配
最初发现问题，是在手机端浏览旧文章时，看到文章中的图片没有正常缩放到屏幕宽度内。
部分图片看起来明显偏大，正文区域被撑宽，图片也没有按照当前主题的响应式规则正常显示。
由于问题出现在较早年份的文章中，我初步怀疑可能与早期文章的 HTML 结构有关。尤其是 2014、2017 年左右的文章，当时大概率使用的是 WordPress 经典编辑器，而不是现在的区块编辑器。
二、先确定问题范围：不是全站模板问题，而是少数旧文章问题
我的博客当前使用的是 WordPress 2025 主题。这个主题涉及的核心模板并不多，因此我先没有直接全站排查，而是整理了一组有代表性的 URL 进行抽样测试。
测试 URL 覆盖了以下页面类型：
- 中文首页
- 英文首页
- 中文分类归档页
- 英文分类归档页
- 标签归档页
- 搜索结果页
- 关于页面
- 日期归档页
- 404 页面
- 2026 年新文章
- 2014 年旧文章
- 2017 年英文旧文章
本次整理出的测试网址如下：
https://www.shuijingwanwq.com/ 博客首页（中文）
https://www.shuijingwanwq.com/en/ 博客首页（English）
https://www.shuijingwanwq.com/category/programming-language/ 所有归档（分类）（中文）
https://www.shuijingwanwq.com/en/category/programming-language-en/ 所有归档（分类）（English）
https://www.shuijingwanwq.com/tag/sql/ 所有归档（标签）（中文）
https://www.shuijingwanwq.com/2026/05/22/12860/ 单篇文章（2026）（中文）
https://www.shuijingwanwq.com/en/2026/06/08/16568/ 单篇文章（2026）（English）
https://www.shuijingwanwq.com/?s=fcitx 搜索结果（中文）
https://www.shuijingwanwq.com/about-me-contact/ 页面（中文）
https://www.shuijingwanwq.com/2014/ 所有归档（日期）（中文）
https://www.shuijingwanwq.com/2014/11/10/387/ 单篇文章（2014）（中文）
https://www.shuijingwanwq.com/en/2017/12/20/15940/ 单篇文章（2017）（English）
https://www.shuijingwanwq.com/2014/11/10/38555 页面：404（中文）
测试后发现，绝大多数页面显示正常，最终只有以下两篇旧文章存在明显问题：
https://www.shuijingwanwq.com/2014/11/10/387/
https://www.shuijingwanwq.com/en/2017/12/20/15940/
这个结果非常关键。
它说明问题不是 2025 主题整体模板失效，也不是首页、归档页、搜索页、404 页等模板层面的响应式问题，而是集中在少数旧文章的正文内容里。
三、使用 Microlink Bulk Website Screenshot 进行移动端截图测试
为了快速排查这些页面的移动端表现，我使用了 Microlink Bulk Website Screenshot 工具。
测试时使用的核心配置如下：
Device：Mobile
Viewport：393 × 852
Full page screenshot：勾选
Block ads and banners：不勾选
Use cache：不勾选
其中，Full page screenshot 需要勾选。因为这次排查的是整篇文章内部的图片、广告、代码块和正文区域，如果只截首屏，很容易漏掉正文中的图片错位问题。
一开始截图中有部分文章图片为空白，后来确认这是因为我的博客启用了图片懒加载机制。截图工具不一定会像真实用户一样慢慢滚动触发图片加载，所以可能会出现图片占位区域为空的情况。
重新测试后，图片正常出现在截图中，最终确认问题集中在上面两篇旧文章。
四、查看旧文章 HTML：发现 figure.wp-caption 写死宽度
接下来，我开始查看出问题文章中的图片 HTML。
以 2017 年英文文章为例，问题图片的 HTML 结构如下：
<figure id="attachment_2150" aria-describedby="caption-attachment-2150" style="width: 816px" class="wp-caption alignnone">
<a href="https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4.png">
<img decoding="async"
class="size-full wp-image-2150 lazy entered loaded exited"
src="https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4.png"
data-src="https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4.png"
alt="新建完毕，点击 Start 按钮，启动设备"
width="816"
height="639"
data-srcset="https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4.png 816w, https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4-300x235.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4-768x601.png 768w"
data-sizes="auto, (max-width: 816px) 100vw, 816px"
data-ll-status="loaded"
sizes="auto, (max-width: 816px) 100vw, 816px"
srcset="https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4.png 816w, https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4-300x235.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2017/12/3-4-768x601.png 768w">
</a>
<figcaption id="caption-attachment-2150" class="wp-caption-text">Figure 3</figcaption>
</figure>
关键问题在这里：
style="width: 816px"
class="wp-caption alignnone"
也就是说，图片本身虽然有 srcset 和 sizes，理论上具备响应式能力，但外层的 figure.wp-caption 被经典编辑器写死了固定宽度。
在桌面端，这种固定宽度通常不明显。但在移动端，比如视口宽度只有 393px 时，外层容器仍然保持 816px，就会撑破页面。
图5：2017 年旧文章中的 figure.wp-caption 固定宽度 HTML
随后我又查看 2014 年中文旧文章，发现类似结构，只是图片原始宽度更大：
<figure id="attachment_390" aria-describedby="caption-attachment-390" style="width: 975px" class="wp-caption alignnone">
<a href="https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3.png">
<img decoding="async"
class="size-full wp-image-390 lazy entered loaded"
src="https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3.png"
data-src="https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3.png"
alt="在新安装的UC中添加应用phpsso！"
width="975"
height="891"
data-srcset="https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3.png 975w, https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3-300x274.png 300w"
data-sizes="auto, (max-width: 975px) 100vw, 975px"
data-ll-status="loaded"
sizes="auto, (max-width: 975px) 100vw, 975px"
srcset="https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3.png 975w, https://www.shuijingwanwq.com/wp-content/uploads/2014/11/3-300x274.png 300w">
</a>
<figcaption id="caption-attachment-390" class="wp-caption-text">在新安装的UC中添加应用phpsso！</figcaption>
</figure>
这里的问题同样是：
style="width: 975px"
class="wp-caption alignnone"
继续对比后可以确认，2014 与 2017 两篇文章的 HTML 结构本质上没有区别。
它们都属于经典编辑器生成的 figure.wp-caption 结构，并且都带有内联固定宽度：
style="width: 816px"
style="width: 975px"
因此，本次问题的核心不是某一年份文章的特殊 HTML，而是经典编辑器旧文章中普遍可能存在的 figure.wp-caption 固定宽度。2014 与 2017 两篇问题文章只是暴露了同一类历史遗留结构。
至此，问题基本定位清楚：
经典编辑器旧文章中的图片说明容器
figure.wp-caption保留了固定宽度，导致移动端无法按屏幕宽度正常缩放。
五、为什么不是直接删除 width 和 height 属性
一开始看到图片标签里的：
width="975"
height="891"
很容易以为问题出在 img 标签的 width 和 height 属性上。
但实际上，这两个属性不一定是坏事。现代浏览器可以利用它们提前计算图片比例，减少页面布局抖动。
真正导致移动端撑宽的是外层容器中的内联样式：
style="width: 975px"
因此，我没有选择批量删除旧文章中的 width 和 height 属性，也没有直接批量修改数据库中的文章 HTML。
对于这种历史遗留问题，优先使用 CSS 兜底修复更安全。
六、第一次 CSS 修复：限制图片和 wp-caption 最大宽度
最初我添加了一版 CSS：
/* ==========================================================================
🖼️ 旧文章图片说明（Caption）移动端适配修复
解决：经典编辑器旧文章中的 figure.wp-caption 被内联 style 固定宽度，
导致移动端图片不缩放、正文被撑宽、图片说明区域不居中的问题。
适用于 2014/2017 等早期文章在 2025 主题下的响应式兼容修复。
========================================================================== */
.entry-content img {
max-width: 100%;
height: auto;
}
.entry-content .wp-caption {
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
}
.entry-content .wp-caption img {
max-width: 100%;
height: auto;
}
这段 CSS 添加后，2017 年英文文章在手机真机中看起来已经正常，但 2014 年中文文章仍然显示异常。
不过继续对比 HTML 后发现，2014 与 2017 两篇文章的结构其实没有本质区别。它们都属于经典编辑器生成的 figure.wp-caption 结构，并且都带有内联固定宽度。
因此，2014 页面当时仍然异常，不一定是因为它的 HTML 结构更特殊，也可能与 W3 Total Cache、Cloudflare 或在线截图工具缓存有关。
为了让修复更稳，我最终仍然将 CSS 从只限制 max-width，升级为同时覆盖 width 和 max-width。
七、升级 CSS：同时覆盖 width 和 max-width
最终我将 CSS 升级为更完整的一版：
/* ==========================================================================
🖼️ 旧文章图片说明（Caption）移动端适配修复
解决：经典编辑器旧文章中的 figure.wp-caption 被内联 style 固定宽度，
例如 style="width: 816px" / style="width: 975px"，
导致移动端图片不缩放、正文被撑宽、图片说明区域不居中的问题。
适用于 2014/2017 等早期文章在 2025 主题下的响应式兼容修复。
========================================================================== */
.entry-content img,
.wp-site-blocks img {
max-width: 100%;
height: auto;
}
.entry-content figure.wp-caption,
.entry-content .wp-caption {
width: auto !important;
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.entry-content figure.wp-caption a,
.entry-content .wp-caption a {
display: block;
max-width: 100%;
}
.entry-content figure.wp-caption img,
.entry-content .wp-caption img {
display: block;
max-width: 100%;
height: auto;
}
这版 CSS 中最关键的是：
width: auto !important;
max-width: 100% !important;
由于旧文章里存在内联样式：
style="width: 975px"
所以需要用 !important 明确覆盖它。
即使第一版 CSS 在某些情况下可能已经足够，最终仍然保留 width: auto !important，是为了明确覆盖经典编辑器写入的内联 style="width: xxxpx"，避免不同缓存状态、不同浏览器、不同截图工具下出现不一致结果。
八、缓存影响：为什么游客端可能仍然显示旧效果
添加 CSS 后，我使用 W3 Total Cache 清除了出问题页面的缓存，但下载后的在线截图仍然看起来有问题。
后来我在桌面设备上登录 WordPress 后，打开开发者工具切换到手机模式，访问这篇文章，发现页面已经正常。
这说明 CSS 修复本身已经生效。
后续我又在登录状态下打开其他 2014 年的单篇文章，发现文章中的图片也已经正常显示。
这进一步说明问题不是 CSS 无效，而是游客端页面可能仍然受缓存影响。
我的网站使用了 W3 Total Cache，同时也使用 Cloudflare。对于这种非紧急问题，我没有选择全站清除 W3 Total Cache 缓存，也没有在 Cloudflare 上执行清除缓存操作。
原因是：
- 登录状态下已经验证修复有效；
- 问题属于旧文章移动端显示兼容问题，不是全站访问故障；
- 全站清缓存可能带来额外回源压力；
- 可以等待缓存自然过期。
最终处理策略是：
保留 CSS 修复；
不全站清除 W3 Total Cache 缓存；
不主动清除 Cloudflare 缓存；
等待游客端缓存自然过期。
九、本次排查结论
这次排查后，可以得到几个比较明确的结论。
第一，当前 2025 主题模板整体没有明显移动端布局问题。首页、归档页、标签页、搜索页、普通页面、404 页面、新文章页面都基本正常。
第二，问题主要集中在早期经典编辑器文章中，尤其是带图片说明的旧图片结构。
第三，真正撑破移动端布局的不是图片本身，而是外层 figure.wp-caption 中的内联固定宽度。
典型问题结构如下：
<figure style="width: 975px" class="wp-caption alignnone">
第四，2014 与 2017 两篇问题文章的 HTML 结构没有本质区别，它们暴露的是同一类经典编辑器历史遗留问题。
第五，优先使用 CSS 兜底修复，而不是批量修改数据库中的旧文章 HTML。
第六，验证时要区分真实修复效果和缓存影响。登录状态下看到的页面通常绕过了游客端页面缓存，更适合用来判断 CSS 是否已经生效。
十、最终保留的修复代码
最终保留在 WordPress 全局「额外 CSS」中的代码如下：
/* ==========================================================================
🖼️ 旧文章图片说明（Caption）移动端适配修复
解决：经典编辑器旧文章中的 figure.wp-caption 被内联 style 固定宽度，
例如 style="width: 816px" / style="width: 975px"，
导致移动端图片不缩放、正文被撑宽、图片说明区域不居中的问题。
适用于 2014/2017 等早期文章在 2025 主题下的响应式兼容修复。
========================================================================== */
.entry-content img,
.wp-site-blocks img {
max-width: 100%;
height: auto;
}
.entry-content figure.wp-caption,
.entry-content .wp-caption {
width: auto !important;
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.entry-content figure.wp-caption a,
.entry-content .wp-caption a {
display: block;
max-width: 100%;
}
.entry-content figure.wp-caption img,
.entry-content .wp-caption img {
display: block;
max-width: 100%;
height: auto;
}
十一、后续观察计划
这次没有执行全站缓存清理，因此游客端可能还需要一段时间才能完全看到修复后的效果。
后续我会继续观察以下页面：
https://www.shuijingwanwq.com/2014/11/10/387/
https://www.shuijingwanwq.com/en/2017/12/20/15940/
如果缓存自然过期后，游客端访问也恢复正常，那么这次问题就可以结束。
如果后续仍然遇到个别旧文章图片异常，再继续检查是否存在其他固定宽度元素，例如：
table
pre / code
iframe
旧 div 容器
广告 iframe
手写 style="width: xxxpx"
但至少本次排查已经确认，当前最主要的问题是经典编辑器旧文章中的 wp-caption 固定宽度。
总结
这次问题看似只是“旧文章图片在移动端没有居中缩放”，但排查过程其实很有代表性。
对于运行多年的 WordPress 博客来说，历史文章通常经历过不同主题、不同编辑器、不同图片插入方式。旧文章中的 HTML 结构，未必能完全适配当前主题和移动端响应式布局。
这次最终定位到的问题是：
经典编辑器旧文章中的 figure.wp-caption 被写入固定宽度，
导致移动端图片说明容器撑破正文区域。
最终解决方式不是逐篇修改旧文章，而是通过全局 CSS 进行兼容兜底。
这个方案风险低、覆盖面广，也更适合历史文章较多的老博客。
WordPress 网站维护、性能优化与博客运营咨询
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、CDN / Cloudflare 配置、缓存优化、Google SEO、广告变现和多语言网站运营。
如果你的 WordPress 网站遇到访问慢、缓存异常、插件冲突、广告不显示、SEO 基础结构混乱、CDN 配置不确定等问题，可以联系我做一次远程技术排查。
适合以下用户：
✅ 个人博客站长
✅ WordPress 网站运营者
✅ 独立开发者与内容创作者
✅ SaaS 产品官网运营团队
✅ 希望优化网站速度与稳定性的站点
服务内容：
✅ WordPress 速度优化
✅ Cloudflare / CDN / 缓存配置排查
✅ 插件冲突与页面异常排查
✅ AdSense 广告显示问题排查
✅ SEO 基础结构检查
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：WordPress 维护咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com