网站在手机上显示不一样，通常有三类原因：布局在适应更窄的屏幕（这是预期行为）；手机收到的是另一个版本的页面（缓存、设备识别或插件）；或者手机的浏览器和设置以不同方式渲染页面（Safari 引擎、深色模式、字体缩放）。先弄清楚你遇到的是哪一类，因为三者的解决方法完全不同。
首先，在电脑上复现问题
在电脑上用手机视图打开同一个网址：可以用 Chrome DevTools 的设备模式，也可以用 Mobile View Extension 这类手机视图扩展，它会以移动端 user agent 和手机屏幕尺寸重新加载页面。
- 在手机视图里也显示不对？ 那是布局或内容问题。从原因 1–4 开始排查。
- 手机视图里正常，真机上却不对？ 那是交付或浏览器问题。从原因 5–11 开始排查。
布局与内容方面的原因
1. 缺少 viewport meta 标签或写法错误
没有 <meta name="viewport" content="width=device-width, initial-scale=1"> 时，手机会把页面当作宽约 980 px 的桌面页面来渲染再缩小，所以一切都显得很小。如果取值错误，比如固定的 width=1024，页面的缩放就会很奇怪。参见 viewport meta 标签详解。
2. 有元素比屏幕还宽
只要有一个固定宽度的元素（表格、嵌入内容、长网址、没有设置 max-width: 100% 的图片），整个页面就会出现横向滚动，有些浏览器还会缩小页面来容纳它。在 DevTools 中检查哪些元素的 scrollWidth 大于视口宽度，就能找到它。
3. 断点在意想不到的宽度切换了布局
横屏时手机可能比你想象的更宽，平板也可能落在 768 px 断点的桌面一侧。在 iPhone 屏幕尺寸与视口一览表中核对设备的实际宽度，并重新检查你的断点。
4. 移动端隐藏或重排了内容
页面构建器和 CSS 经常在小宽度下用 display: none 隐藏某些区块，或者调整列的顺序。这是有意的设计，但很容易被遗忘。检查仅针对移动端的显示设置。
交付方面的原因：手机拿到的是另一个页面
5. 缓存返回了旧版本
手机浏览器可能还保存着旧的 CSS，或者你的 CDN 或缓存插件保留了一份没有清除的独立移动端缓存。清除网站缓存和 CDN 缓存，然后在手机的无痕标签页中重新加载。
6. 设备识别返回了不同的模板
有些主题、插件和服务器会检查 user agent，并给手机返回不同的 HTML。桌面浏览器窗口即使缩得很窄，也永远看不到那个版本。发送真实移动端 user agent 的手机视图才能看到。user agent 的工作原理见 User agent 切换器是什么。
7. 广告、A/B 测试与个性化
广告位、实验和基于位置的内容，可能因设备或访问而不同。请在未登录状态下、用无痕标签页测试，如果工具允许，还要关闭实验。
浏览器与设置方面的原因：手机的渲染方式不同
8. Safari 引擎的表现不同
iPhone 上的浏览器基本都使用 WebKit。差异主要出现在表单控件、带 overflow 的容器中的 position: sticky、会收起的地址栏与 100vh（请改用 100dvh）以及较新的 CSS 特性上。通过 Xcode Simulator 或真机在 iOS Safari 中测试；参见在 iPhone 上测试。
9. 浏览器强制应用了深色模式
一些浏览器（例如 Samsung Internet）会对没有声明配色方案的页面强制使用深色。透明背景的 logo 和写死的颜色会变得难以辨认。声明 color-scheme 并用 prefers-color-scheme 提供深色主题，或者明确指定浅色。
10. 字体和文字大小不同
如果网页字体加载失败，手机会退回到系统字体，字符宽度不同，换行位置也就不同了。用户还可能在浏览器或系统的无障碍设置中放大文字，移动端浏览器有时也会在横屏时自动放大文字。请使用相对单位，允许文字换行；如果自动放大造成问题，可以设置 text-size-adjust: 100%。
11. 浏览器功能改变了页面
内容拦截器、省流量模式、阅读模式和翻译，都可能改变访客看到的内容。如果只有一个人反馈布局奇怪，先问清楚他用的是什么浏览器、开了哪些功能，再决定要不要改。
快速诊断表
| 症状 | 最可能的原因 |
|---|---|
| 一切都很小，需要放大才能看 | 缺少 viewport 标签（1） |
| 页面可以左右滑动 | 有元素比屏幕宽（2） |
| 预览正常，手机上却是旧设计 | 缓存（5） |
| 手机上是完全不同的设计 | 设备识别或移动端主题（6） |
| 只在 iPhone 上出问题 | Safari/WebKit 差异（8） |
| 颜色反转或 logo 看不见 | 强制深色模式（9） |
| 换行不同，按钮溢出 | 后备字体或文字缩放（10） |
下次如何避免
开发过程中就用手机视图检查新页面，而不是等到上线之后，并准备一份简短的发布检查清单。移动端网页测试清单中就有一份。WordPress 的专门修复方法，请参阅如何让 WordPress 网站适配手机。
常见问题
为什么网站在我手机上和在 Chrome 手机视图里显示得不一样？
Chrome 手机视图使用的是 Chrome 引擎和你电脑上缓存的文件。手机可能使用 Safari 引擎，有不同的缓存文件或 CDN 的移动端缓存，还可能开启了深色模式或文字缩放。
为什么我的 WordPress 网站在手机上显示不一样？
最常见的原因有：页面构建器的设置只应用于桌面尺寸、缓存插件返回旧的移动端缓存，以及主题或插件返回了单独的移动端布局。
为什么我的网站在手机上是缩小显示的？
通常是缺少 viewport meta 标签，或者有元素比屏幕宽，浏览器为了容纳它而缩小了页面。