技术 SEO

移动友好性与点击目标尺寸审查工具

Google 已于 2023 年停用了自家的移动友好测试工具。粘贴您的页面 HTML(如果 CSS 不是内联的,也请一并粘贴),本工具将运行七项真实检查:viewport meta、固定桌面宽度布局、可读字体大小、估算的点击目标尺寸、过时插件标签,以及 WCAG 色彩对比度。

如果 HTML 或此框中都没有找到 CSS,需要 CSS 的检查项(布局宽度、字体大小、点击目标、对比度)将被跳过或标记为"数据不足"。

这是一个基于静态规则的审查——不会像真实手机那样渲染页面,因此点击目标和布局结果是基于您的 CSS 的近似估算,而非像素级精确测量。

本工具检测什么

七项对真实移动访客和 Google 移动优先索引都重要的检查:正确且不阻止缩放的 viewport 标签;没有硬编码的桌面宽度布局;没有难以辨认的过小文字;链接和按钮拥有舒适的点击目标尺寸;没有失效的 Flash/Java/marquee 标记;以及符合 WCAG 的文字对比度。粘贴完整页面 HTML(查看源代码即可),如果 CSS 位于外部样式表中,也请一并粘贴。

每项检查如何运作

这里没有任何猜测——每个发现都来自解析您粘贴的 HTML(DOM)和 CSS(真正的规则解析器,会展开 @media 块),然后套用 Google 和 WCAG 公布的相同阈值。

Viewport meta 标签

检查该标签是否存在、是否使用 width=device-width 与 initial-scale=1,以及是否阻止双指缩放(user-scalable=no 或 maximum-scale 小于 2,属于 WCAG 1.4.4 不合格项)。

固定桌面宽度布局

扫描 CSS 中的结构性选择器(body、.wrapper、.container、#page 等),查找硬编码为 601px 或更大的 width 或 min-width——这是布局从未做过响应式适配的典型迹象。

可读字体大小

标记任何小于 12px 的 font-size 声明,这是在手机屏幕上无需双指缩放即可舒适阅读的常用最小值。

点击目标尺寸

根据 font-size、line-height 和 padding(或显式的 width/height)估算链接、按钮及 role="button" 元素的渲染高度,并与 Google Lighthouse 和 WCAG 2.5.5 给出的约 44-48px 指导值进行比较。

过时插件内容

标记 <applet>、<marquee>、<blink>,以及任何指向 Flash(.swf)的 <embed>/<object>——这些在当前任何移动浏览器中都无法运行。

色彩对比度(WCAG)

对于同时设置文字颜色和背景颜色的任意 CSS 规则,计算真实的 WCAG 相对亮度对比度,并对照 4.5:1(大号/粗体文字为 3:1)的 AA 最低标准进行检查。

响应式断点

统计 CSS 中的 @media 规则数量,作为布局是否适应更小屏幕的参考信号——仅供参考,因为流式布局即使没有任何媒体查询也可能是响应式的。

常见问题

Google 为什么停用了移动友好测试?

Google 于 2023 年 12 月关闭了独立的移动友好测试工具,将移动友好性检测并入了更宏观的 Search Console 报告中,不再提供快速的单页检测器。本工具填补了这一空白,提供无需登录、基于规则、可对任意粘贴 HTML 运行的快速审查。

为什么我需要单独粘贴 CSS?

大多数真实页面的 CSS 来自外部样式表(<link rel="stylesheet">),仅凭粘贴的 HTML,本工具无法代您获取该内容。将样式表内容粘贴到 CSS 框中,布局、字体大小、点击目标和对比度检查都会针对它运行。

什么样的点击目标尺寸算好?

根据 Google Lighthouse 和 WCAG 2.5.5(目标尺寸)标准,大约 44-48 CSS 像素的高和宽。低于这个尺寸,真实手指在真实屏幕上误触相邻链接的概率会明显提高。

点击目标的估算是精确的吗?

不是——它是基于您声明的 font-size、line-height 和 padding(或显式的 width/height)得出的可靠估算,而非真实浏览器渲染。将接近 44-48px 分界线的结果视为"需要在真实设备上验证",将远低于该值的结果视为明确的不合格。

这个工具会把我的 HTML 或 CSS 发送到别处吗?

您粘贴的 HTML/CSS 会通过 HTTPS 发送一次到我们的服务器以运行解析器(需要这样才能让同一套规则引擎对每个人都一致运行),请求结束后不会被存储。