大多数在手机上显示不佳的 WordPress 网站，原因无外乎三种：从未做过响应式的老主题、忽略移动端的区块或页面构建器设置，以及使用固定宽度的自定义 CSS。请按这个顺序修复：先确认主题是响应式的，再在编辑器或构建器中调整移动端设置，最后清理自定义代码和插件。每完成一步，都在手机尺寸下检查后再继续。
第一步：检查主题是否为响应式
在手机视图中打开网站（见如何在电脑上查看网站的手机版），查看一个没有特殊布局的简单页面，比如隐私政策页。如果连这个页面都被缩小显示或出现横向滚动，问题就出在主题上。
两个快速检查：
- 查看页面源代码，搜索
name="viewport"。响应式主题会在<head>中输出 viewport meta 标签。如果没有，说明这个主题诞生于移动端设计普及之前。 - 在外观 > 主题中查看主题的年代和更新情况。多年未更新的主题，风险不只在移动端布局上。
如果主题不是响应式的，换主题通常比修补更省事。当前的默认区块主题（如 Twenty Twenty-Five）以及大多数仍在积极维护的主题，开箱即为响应式。启用前先用实时预览试一试新主题。
第二步：使用编辑器的移动端预览
WordPress 内置了按设备预览的功能：
- 在区块编辑器和站点编辑器中，顶部工具栏的预览控件可以在桌面、平板和手机之间切换。
- 在经典主题的定制器中，侧边栏底部的设备按钮起同样的作用。
这些预览只会调整画布尺寸，适合在编辑时发现布局问题。它们不会发送移动端 User Agent，所以之后还要在真正的手机视图中确认线上页面。
第三步：修复小屏幕上的区块布局
区块编辑器的常见问题及解决方法：
- 列被挤压而不是纵向堆叠。 选中“栏目”区块，确认已开启在移动设备上堆叠的选项。
- 固定的宽度和高度。 图片、封面和组区块可能带有固定的像素尺寸。宽度尽量用百分比，高度用最小高度而非固定高度，以免文字在窄屏上被截断。
- 字号过大。 桌面上好看的 72px 标题，在手机上会溢出。如果主题提供流式字体预设，就使用它们，它们会随屏幕缩放。
- 过宽的表格。 列数多的表格在手机上会溢出。要么精简表格，要么让它在自身容器内横向滚动。
第四步：检查页面构建器的移动端设置
如果你使用 Elementor、Divi 或 Beaver Builder 等页面构建器，大多数移动端问题都来自只在桌面尺寸下设置的参数。构建器都有响应式模式，可以为手机和平板分别设置间距、字号、列宽和显示与否。
- 把构建器切换到手机视图。
- 缩小以像素设置的大内边距和外边距。
- 调整移动端的标题字号。
- 检查列堆叠后的顺序；如果图片出现在它所配合的标题之前，就把顺序反过来。
- 不要在移动端隐藏重要内容。Google 索引的是移动版，被隐藏的文字对它来说等于不存在。
构建器还有自己的断点（Elementor 默认手机为 767px、平板为 1024px，也可以自行添加）。确保自定义 CSS 使用相同的宽度。关于如何选择宽度，见响应式断点指南。
第五步：修复菜单
在手机上，导航应当折叠成一个菜单按钮。区块主题通过“导航”区块的覆盖层设置实现（设为“移动设备”或“始终”）。经典主题由主题自身处理；如果它做不到，这又是一个该换主题的信号。保持移动端菜单简短，并测试子菜单能否通过点按展开。
第六步：图片与速度
WordPress 在这方面已经做了很多：为每张上传的图片生成多种尺寸，添加 srcset 让手机获取更小的文件，并默认对图片进行懒加载。你还可以：
- 上传的图片不要大于它可能显示的最大尺寸
- 转换为 WebP 或 AVIF（新版 WordPress 原生支持，也可以借助图片插件）
- 使用缓存插件或主机提供的缓存
- 删除不用的插件，每个插件都可能在所有页面上加载脚本
用移动端页面速度测试指南中的方法衡量效果。
第七步：排查自定义 CSS 和插件冲突
如果网站仍然可以横向滚动，就要找出过宽的元素。在 Chrome DevTools 的 Console 中运行下面的代码，列出比屏幕更宽的元素：
[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)常见的罪魁祸首包括：外观 > 自定义 > 额外 CSS 中的 width: 1200px 之类的规则、固定尺寸的嵌入小工具（旧的社交动态、地图、表单），以及写死内联宽度的轮播图。
第八步：正确测试线上网站
编辑器预览只是开始。在宣布完工之前：
- 在 Chrome 中以手机视图打开关键页面。Mobile View Extension 一键即可完成，并用移动端 User Agent 加载线上页面，让你看到手机实际拿到的内容，包括缓存或移动端插件返回的版本。
- 在真机上测试表单和结账流程。
- 运行 Lighthouse 移动端审计（操作方法）。
如果手机上的效果与预览不同，网页在手机上显示错乱的原因列出了常见原因。
常见问题
为什么我的 WordPress 网站在编辑器里正常，在手机上却不正常？
编辑器预览只调整画布尺寸。缓存插件、移动端插件、CDN 设置以及手机浏览器本身，都可能改变实际返回的内容。请在真正的手机视图中检查线上页面，并在修改后清除缓存。
让 WordPress 适配移动端需要插件吗？
通常不需要。响应式主题能完成大部分工作。生成独立手机主题的插件多年前很常见，如今已基本用不上。
WordPress 移动端还需要 AMP 吗？
不需要。AMP 是可选的，一个快速的响应式页面无需单独格式也能达到同样的目标。