移动友好性测试工具

输入一个URL后,测试工具会在模拟手机视口(默认尺寸为375×812像素,对应iPhone屏幕规格)中加载页面,检查谷歌自家曾用于标记可读性问题但现已停用的常见移动端阅读障碍,并返回一份可修复的问题列表:缺失视口元标签、文本字号小于12像素、点击目标区域小于48×48像素、水平滚动、使用Flash或不受支持的插件,以及内容宽度超过视口尺寸。

测试运行方式

  1. 1

    输入网址

    包含协议的完整 URL。仅限公开页面。

  2. 2

    页面在手机尺寸视口内渲染

    默认尺寸为 375×812,可自定义。

  3. 3

    自动检查已运行

    视口元数据、文本大小、点击目标间距、溢出处理、插件。

  4. 4

    预览并报告

    渲染后的手机视图截图以及具体问题列表。

测试人员检查的内容

视口配置

是否存在<meta name="viewport" content="width=device-width, initial-scale=1">型号?若缺少该型号,移动浏览器会将手机屏幕呈现为桌面宽度,并自动缩放以适应显示,导致文字显示得非常小。

文本大小

  • 所有字号小于12像素的渲染文本都会被标记,在没有缩放功能的手机上难以阅读。 许多样式指南建议最小字号为16像素。极小的标题文字可以接受,但11像素的正文内容则不宜使用。

点击目标尺寸

按钮、链接及表单控件的尺寸应至少为48×48像素(符合Google/W3C移动无障碍设计规范)。 较小的目标难以用拇指准确击中,且会显示标记。

点击目标间距

与相邻目标距离小于8像素的目标会引发误触;这些目标将被单独标记。

水平滚动

当内容超出视口范围时,系统会强制执行水平滑动,这会严重影响移动设备的用户体验。这种情况通常由缺少max-width: 100%属性的图片或无法自动换行的表格引起。

不支持的插件

Flash、Silverlight 和 ActiveX 在手机上无法正常运行。一些旧版网站有时仍会使用这些技术。

字体加载

  • 大到导致渲染延迟数秒的超大网络字体将被标记。

为何这仍然很重要

谷歌于2023年12月终止了独立的移动友好性测试,但移动友好性仍通过核心网页健康指标和页面体验数据作为直接排名依据。移动优先索引机制意味着谷歌会以手机端视角抓取您的网站;移动端表现不佳的内容同样会在桌面端排名中显现。

常见修复方法

  • <head><meta name="viewport" content="width=device-width, initial-scale=1"> 中添加视口元数据。
  • 基于媒体查询的响应式CSS:@media (max-width: 768px) { ... }
  • 采用 Flexbox 和 Grid 布局,而非固定宽度布局。
  • 设置图像 max-width: 100%; height: auto,使图像随视口缩放而缩小。
  • 在小屏幕上使表格可滚动:使用 <div style="overflow-x: auto"> 进行换行设置。
  • 请使用 remem 设置文本大小,以确保按用户偏好进行缩放。

测试人员未能发现的问题

  • 实际硬件性能表现。 使用3G网络的低端安卓手机会出现本测试工具无法模拟的延迟现象;请使用Lighthouse进行性能测试。
  • 触控交互: 仅支持悬停显示、触碰时失效的下拉菜单需在真实设备上进行人工测试。
  • 超越移动设备尺寸限制的无障碍功能:对比显示、屏幕阅读器支持、键盘导航,请使用专用无障碍工具。
  • 在针对移动设备优化的浏览器上出现 JavaScript 错误。iOS 系统上的 Safari 浏览器有时与其他版本的 WebKit 版本存在行为差异。

常见问题

检查方式相似,但实现方式不同。谷歌已于2023年底停止提供该公开工具。此测试工具采用与谷歌相同的经典检测规则,针对无头浏览器获取的页面版本进行验证。

没错,谷歌自2020年起就将移动端优先纳入索引体系,这意味着移动端显示效果才是排名的主要依据。移动端问题甚至会影响桌面端搜索的排名表现。

不。该测试工具仅获取公开可访问的URL。对于受保护的预发布环境,请使用Chrome DevTools的设备模拟模式进行本地测试。

默认分辨率为375×812(适用于iPhone 12/13/14),可设置为390×844(iPhone 14 Pro)、360×640(常见安卓机型)或412×915(Pixel 7)。

通常耗时5至15秒,具体取决于页面内容的复杂程度。包含大量脚本的复杂页面耗时更长;测试工具会在捕获数据前等待加载事件完成并经历短暂空闲期。

相关工具

此工具还提供其他语言版本