移动端网页测试的目的，是在真实访客发现问题之前，确认网站在手机上清晰可读、好用且加载快。下面的清单分七组，共 30 项检查。大多数在电脑上的手机视图里几秒就能完成，少数需要真机。每次上线或改版前完整过一遍，日常发布则用精简版。
开始之前：准备测试设备
你需要三类视图：
- 电脑上的快速手机视图，用于批量检查多个页面的布局：Chrome DevTools 设备模式，或 Mobile View Extension 这类扩展。两者的区别见手机模拟器扩展与 DevTools 对比。
- 真实的移动端引擎（以及浏览器兼容性测试清单中的桌面浏览器）：通过 Xcode Simulator 或真实 iPhone 测试 iOS Safari，以及安卓上的 Chrome。参见在 iPhone 上测试和在安卓上测试。
- 至少一台真实的中端手机，用于测试触控、键盘和速度。
至少测试以下宽度（这些数字的含义见什么是视口尺寸）：竖屏 360 px、390–402 px 和 430–440 px，再加一个横屏尺寸和一个平板尺寸。
1. 布局与可读性
- 所有页面都没有横向滚动。如果某个页面能左右滑动，就找出比屏幕宽的元素；常见原因是固定宽度、过长的网址和宽表格。
- 正文字号至少 16 px，行宽不超过屏幕。
- 标题换行整齐，没有单个词孤零零地落在一行。
- 图片随屏幕缩放并保持宽高比。
- 多列堆叠成单列后，内容顺序依然合理。最重要的内容没有被挤到长侧边栏下面。
- 横屏时没有内容被刘海或主屏幕指示条挡住（如果使用全出血布局，检查
env(safe-area-inset-*)）。 - 页面有正确的 viewport meta 标签。没有它，手机会显示缩小的桌面版页面。参见 viewport meta 标签详解。
2. 导航
- 菜单点一下就能打开和关闭，选择链接后自动关闭。
- 所有菜单项（包括子菜单）不靠悬停也能访问到。
- 每个页面都有 logo 或返回首页的链接。
- 横屏时，固定页眉只占屏幕高度的一小部分。
- 返回按钮（以及安卓的返回手势）会回到预期的位置，单页应用中也是如此。
3. 触控与交互
- 点按目标足够大且间距充分。WCAG 2.2 规定最小 24 × 24 CSS 像素，苹果和谷歌的设计规范建议约 44–48 px。
- 轮播和滑块可以通过滑动操作，并有可见的控制按钮。
- 弹窗和 Cookie 横幅容易关闭，进入页面时不会遮住整个屏幕。
- 正文中的链接不靠悬停也能辨认。
4. 表单
- 每个输入框都调出合适的键盘：
type="email"、type="tel"、inputmode="numeric"。 - 输入框文字至少 16 px，避免 iOS Safari 在聚焦时自动放大。
- 屏幕键盘不会挡住正在输入的字段或提交按钮。
- 姓名、邮箱、地址和支付字段可以自动填充（
autocomplete属性）。 - 错误提示显示在字段旁边，不用滚动就能看到。
5. 媒体与资源
- 图片按屏幕提供合适的尺寸（
srcset和sizes），而不是把桌面尺寸的文件缩小显示。 - 视频不会带声音自动播放，在需要时于 iPhone 上内嵌播放（
playsinline）。 - 图标和 logo 在高密度屏幕上清晰（SVG 或 2x/3x 图片）。
6. 速度
- 在限速网络下，主要内容也能快速出现。在 PageSpeed Insights 中查看真实用户数据，并运行实验室测试；两者的做法见移动端网站测速指南。
- 页面加载时布局不跳动（Cumulative Layout Shift）。
- 页面对第一次点按响应迅速（Interaction to Next Paint）。
7. 移动端的 SEO 与无障碍
- 移动版页面的主要内容、标题、结构化数据和 meta 标签与桌面版一致。Google 以移动版进行索引。
- 文字放大到 200% 时布局不乱，并且至少在一台手机上开启读屏功能后页面仍可使用。
- 移动模式下的 Lighthouse 审核没有严重的无障碍或 SEO 问题。步骤见在 Chrome 中进行 Lighthouse 移动端审核。
每次发布用的精简版
没人会在每次部署时都做 30 项检查。日常发布时：
- 用 360 px 和 430 px 的手机视图打开改动过的页面
- 检查有没有横向滚动和失灵的菜单
- 用真机提交一次表单
- 扫一眼主要落地页的速度报告
大约十分钟，就能发现大部分回归问题。
移动端测试的常见错误
- 只靠调整浏览器窗口大小来测试。 这样只改变了宽度，没有改变 user agent、像素比或输入方式，而有些网站会给真实手机返回不同的页面。详见如何在电脑上查看网站的手机版。
- 只在最新旗舰机上测试。 大多数访客的设备比开发者的慢。
- 忽略横屏和平板。 很多布局恰恰在 768–1024 px 附近出问题；参见如何在 Chrome 中以 iPad 视图查看网站。
- 只测试未登录的页面。 账户中心和结账流程在移动端往往最不受重视。
常见问题
没有手机怎么测试网站的移动端？
布局用桌面版 Chrome 的手机视图，iPhone Safari 用 Mac 上的 Xcode Simulator，安卓用 Android Studio 模拟器。关键流程的最终检查请用真机。
移动端网站最常见的问题是什么？
内容比屏幕宽，导致出现横向滚动。通常是固定宽度的元素、宽表格或没有设置 max-width: 100% 的图片造成的。
Google 有官方的移动端测试工具吗？
Google 已于 2023 年 12 月停用移动设备适合性测试，现在推荐使用 Lighthouse。替代工具见 Google 移动设备适合性测试的替代方案。