用途:在真实手机尺寸下审计页面,找出只在小屏出现的移动端缺陷,如横向滚动、触控目标过小、输入框触发 iOS 页面缩放、viewport meta 缺失或阻碍缩放、固定元素遮挡阅读区等。
主要能力:在 390x844(iPhone)与 360x800(常见 Android)两个视口分别检查;检测横向溢出元素;按 WCAG 2.2 SC 2.5.8(24x24 CSS px 底线)与 Apple HIG / WCAG 2.5.5 AAA(44x44)评估触控目标;找出 font-size 小于 16px 会触发 iOS Safari 聚焦缩放的表单控件;检查 viewport meta 内容及是否通过 user-scalable=no 或 maximum-scale 阻挡缩放(违反 WCAG 1.4.4);统计 fixed/sticky 元素占视口高度比例;并在每个尺寸截图作视觉确认。输出带 A–F 等级的报告表格与优先修复项。
使用方式:需要 Playwright MCP(随 Claude Code 提供)。触发语如“Mobile audit for https://...”或“Does my site work on phones?”。流程为 browser_navigate 打开 URL,browser_resize 到 390x844,等待约 1 秒重排后执行评估函数,再在 360x800 重复;browser_take_screenshot 截图。
限制:模拟不代表真机。真实 iOS Safari 渲染、屏幕键盘、安全区插入、手势导航与触摸命中测试都与缩放的桌面 Chromium 不同,通过模拟只是必要而非充分条件。判定时需注意:overflowers 可能包含有意置于屏外的元素(轮播、抽屉),只应计实际产生横向滚动条者;行内链接豁免 SC 2.5.8;fixed 覆盖超过约 30% 视口高度说明固定条在挤占阅读区。若要在真实设备上测试,资料提到可尝试 HelpMeTest。