免费工具 移动端友好测试：Google 原工具停用后，这样查手机适配
Google 在 2023 年 12 月关掉了「移动设备适合性测试」（Mobile-Friendly Test）工具和接口，改让大家用 Lighthouse。本页在模拟手机上跑 Lighthouse 里现在还有的移动端检查、给出截图，并能在本地检查粘贴的 HTML，直接定位到要改的那一行。
- 模拟手机 + 截图
- 只用当前 Lighthouse 还有的审计
- 粘贴的 HTML 不离开浏览器
在手机上检查一个页面
第 1 部分通过 Google PageSpeed Insights 接口测试线上网址（只测手机）；下面第 2 部分检查你粘贴的 HTML，不发送到任何地方。
会发什么、发给谁
- 只在你点按钮时发送：网页地址、手机还是桌面、报告语言和 API key，从你的浏览器直接发到 Google（
www.googleapis.com）。TapCub 看不到、不转发、不保存。 - Google 的服务器随后像访客一样打开这个网页，再把报告返回给你的浏览器；这次请求适用 Google 隐私权政策。
- 你填的 key 只留在这个页面里；勾选「记住」才会存进这个浏览器（
localStorage），取消勾选即删除。 - 在中国大陆网络环境下，浏览器通常连不上 www.googleapis.com，测试会提示网络错误。
还没有测试
填网址、点按钮，真实用户数据和实验室测试结果会显示在这里。先看看 Google 对真实用户数据用的阈值：
| 指标（75 分位） | 良好 | 需改进 | 较差 |
|---|---|---|---|
| 最大内容绘制（LCP） | ≤ 2.5 s | 2.5 s – 4.0 s | > 4.0 s |
| 交互到下一次绘制（INP） | ≤ 200 ms | 200 ms – 500 ms | > 500 ms |
| 累积布局偏移（CLS） | ≤ 0.10 | 0.10 – 0.25 | > 0.25 |
| 首次内容绘制（FCP） · 非核心指标 | ≤ 1.8 s | 1.8 s – 3.0 s | > 3.0 s |
| 首字节时间（TTFB） · 非核心指标 | ≤ 800 ms | 800 ms – 1.8 s | > 1.8 s |
来源：PageSpeed Insights 文档「关于 PageSpeed Insights」和 web.dev，2026-11-11 核对。
检查粘贴的 HTML（本地）
粘贴网页源码或模板，检查 viewport 标签、会撑出横向滚动的固定宽度、过小的字号、没写尺寸的图片，并标出行号。只读代码，不渲染页面。
提示：在浏览器里「查看网页源代码」全部复制。外部 CSS 文件不会被检查，需要的话把 CSS 放进 <style> 里一起粘贴。
- 问题第 5 行viewport 把宽度写死为 width=1024，页面按这个宽度排版再在手机上缩小。改成 width=device-width。
- 需检查第 5 行禁止了缩放（user-scalable=no 或 0）。Lighthouse 的 meta-viewport 审计会判不通过：视力不好的用户需要放大。
- 需检查第 9 行有 2 处 width 写成 500 像素以上的固定值（最大 980 像素），手机上会出现横向滚动，改用 max-width 或百分比。
- 提示第 10 行有 2 处字号小于 12 像素（最小 10 像素），手机上不放大很难看清；旧版 Lighthouse 的字号审计以 12 像素为界。
- 提示第 17 行有 1 张图片没写 width 和 height（或 aspect-ratio），加载时页面会跳动，影响累积布局偏移（CLS）。
分享这组输入：数值写在链接的 # 后面，不会发到服务器。
https://tapcub.com/zh/tools/mobile-friendly-test
版本 v1.0更新于 更新记录
每项检查对手机意味着什么
Lighthouse 把它们分成几个独立审计，合起来覆盖了 Google 原工具里还能自动检测的那些问题。
viewport
没有 width=device-width，手机会按桌面宽度渲染再缩小，字很小、点击还可能延迟。这是页面「不适合手机」最常见的原因。
缩放
禁止缩放并不能让页面更适合手机，反而不符合无障碍要求。让用户能双指放大。
点按区域
链接和按钮要够大、间距够宽，手指才不会点到旁边。Lighthouse 用 WCAG 2.2 的目标尺寸规则检查；「不适用」表示没找到又小又挤的目标。
图片和截图
发虚或被拉伸的图片会单独标出。截图是模拟手机实际渲染的结果——看看有没有横向溢出、文字重叠、弹窗挡住内容。
Lighthouse 已经不再检查字号和「内容比屏幕宽」。这两项请看截图、用下面的本地 HTML 检查，并在真机上确认。
测网址、看截图、找到那一行
网址检查告诉你哪里有问题，HTML 检查告诉你问题在第几行。
-
1
检查线上网址
填网址、点按钮，拿到手机截图和 5 项 Lighthouse 移动端审计。
-
2
看截图
截图上被截断、重叠、被横幅挡住的地方，访客看到的也是这样。
-
3
粘贴 HTML
把页面源码或模板粘进本地检查，viewport、固定宽度、小字号都会标出行号。
-
4
真机确认
模拟很接近但不完全一样。用真手机打开（包括在微信里打开），横竖屏都看，点一点主要按钮。
查什么、由谁查
网址部分只报告 Lighthouse 13 里还存在的审计；HTML 部分是本工具自己的规则，依据同样的指引。
- Google 从 2023 年 12 月 1 日起停用移动设备适合性测试工具、对应接口和 Search Console 的「移动设备易用性」报告（Google 搜索中心博客，2023-04-19）
- Lighthouse 12（2024 年）用 target-size 替代了 tap-targets；Lighthouse 13（2025 年 10 月）把 viewport 审计换成 viewport 洞察，并删除了字号审计
- 报告里没有的审计显示为「本报告里没有」，不会算作通过
- HTML 检查只读代码：外部 CSS 文件和 JavaScript 生成的排版看不到
| 检查项 | 来源 | 什么情况下标出 |
|---|---|---|
| viewport-insight | Lighthouse 性能 | 缺少 viewport 标签或没有为手机设置 |
| meta-viewport | Lighthouse 无障碍（axe） | user-scalable=no，或 maximum-scale 小于 5 |
| target-size | Lighthouse 无障碍（axe） | 点按目标太小或太挤（WCAG 2.2） |
| image-size-responsive | Lighthouse Best Practices | 图片分辨率不够这块屏幕用 |
| image-aspect-ratio | Lighthouse Best Practices | 图片显示比例和原图不一致 |
| 固定宽度 ≥ 500 像素 | 本工具（HTML） | width / min-width 写成像素，撑出横向滚动 |
| 字号 < 12 像素 | 本工具（HTML），仅提示 | 不放大可能看不清 |
| 图片没写尺寸 | 本工具（HTML），仅提示 | 没有 width / height 或 aspect-ratio，会造成布局偏移 |
检查「只适配电脑的旧页面」示例
HTML 框里第一个示例是一个固定宽度的老商城页面。下面是本地检查的结果和每一行的改法。
| 行号 | 发现 | 改法 |
|---|---|---|
| 5 | viewport 写死为 width=1024 | content="width=device-width, initial-scale=1" |
| 5 | 禁止缩放（user-scalable=no） | 去掉 user-scalable 和 maximum-scale |
| 9 | 固定宽度 980 像素和 960 像素 | max-width: 980px; width: 100% |
| 10 | 字号 11 像素和 10 像素 | 至少 12 像素，正文 16 像素 |
| 17 | 图片没写宽高 | 按图片文件写上 width 和 height |
第二个示例「响应式页面」把这五处都改了，检查全部通过。在工具里切换两个示例对比看。
手机适配检查容易踩的坑
四个测试通过了也可能还在的问题。
还在找 Google 的绿色结论
原来「网页适合在移动设备上浏览」这样的一句话结论已经没有了。Google 现在推荐 Lighthouse，它给的是逐项审计，不是一个通过 / 不通过。
用禁止缩放来「修」排版
user-scalable=no 只是把排版问题藏起来，还不符合无障碍要求。该改的是宽度。
写死像素宽度
980 像素的外层容器或表格，在 390 像素宽的手机上一定会横向滚动。用 max-width，让内容自动换行。
只在电脑上模拟
模拟器看不到真实字体、浏览器工具栏和触摸手感，微信等 App 内置浏览器也有自己的顶部栏。关键页面要在真机上看。
看手机访客实际用得怎么样
移动端测试只检查一个页面一次；统计能告诉你多少人用手机访问、这些页面在手机上快不快。
Google 的移动设备适合性测试还能用吗？
不能了。Google 从 2023 年 12 月 1 日起停用了移动设备适合性测试工具、对应的 API 和 Search Console 的「移动设备易用性」报告，并建议改用 Lighthouse。Google 同时说明，这并不代表移动设备易用性对 Google 搜索不重要。
用什么替代它？
Google 的公告提到的是 Chrome 的 Lighthouse。Lighthouse 可以在 Chrome 开发者工具、PageSpeed Insights 和它的接口里运行——本页用的就是这个接口，只保留和手机相关的审计。
手机适配检测为什么不查字号了？
Lighthouse 在 13 版（2025 年 10 月）删除了字号审计。本页下面的本地 HTML 检查仍会提示小于 12 像素的字号，这是旧审计用的界限。
点按区域显示「不适用」是什么意思？
target-size 规则只检查又小又挨着别的目标的元素。「不适用」表示没找到需要检查的，是好事，不是出错。
移动端友好会影响排名吗？
Google 按手机版收录网页（2023 年已完成移动优先索引），页面体验指引里也问「内容在移动设备上显示效果好吗」。Google 没有公布一个单独的「移动友好」排名开关。百度方面本页不做推断。
为什么要填 API key？
网址检查从你的浏览器直接调用 Google PageSpeed Insights 接口，Google 现在不给不带 key 的请求额度。key 用 Google 账号免费申请；在中国大陆网络下浏览器通常连不上 Google 接口。粘贴 HTML 检查不需要 key，也不发任何请求。
和网站测速有什么区别？
两者用同一个 Google 接口。网站测速关注加载速度和 Core Web Vitals，可测手机或桌面；本页只测手机，额外跑无障碍（Accessibility）和 Best Practices 审计，给手机截图，并提供本地 HTML 检查。