用途
Responsive Screenshots 用于在多个常见视口尺寸下对网页进行截图，并检查响应式布局问题。它适合快速查看页面在移动端、平板、笔记本、桌面和超宽屏上的呈现效果，并生成一份响应式报告。
主要能力
- 对任意 URL 在 5 种视口尺寸下截图：
- Mobile：375×812，对应 iPhone 14
- Tablet：768×1024，对应 iPad
- Laptop：1280×800，对应 MacBook
- Desktop：1920×1080，对应 Full HD
- Ultrawide：2560×1080，对应 34 英寸显示器
- 保存 PNG 截图文件，例如 screenshot_mobile.png、screenshot_tablet.png、screenshot_laptop.png、screenshot_desktop.png、screenshot_ultrawide.png。
- 报告布局问题，包括：
- 移动端出现横向滚动（内容宽度超过视口）
- 移动端文字过小（小于 14px）
- 触控目标过小（小于 44×44px）
- 移动端导航未折叠为汉堡菜单
- 图片溢出容器
- 固定宽度元素破坏布局
- 输出结构化的响应式报告，包含已捕获截图、发现的问题以及表现良好的部分。
使用方式
前置条件：Playwright MCP（随 Claude Code 提供）。
触发方式示例：
- “Responsive screenshots of https://...”
- “How does my site look on mobile?”
- “Screenshot this page at different sizes”
工作流程：对每个视口执行以下步骤：
- 使用 mcp__playwright__browser_resize 调整到目标视口尺寸。
- 等待 1 秒以便页面重排。
- 使用 mcp__playwright__browser_take_screenshot 截图。
- 记录任何可见问题（溢出、重叠、内容被隐藏）。
随后分析截图中的常见响应式问题，并输出报告。
输出格式示例：
Responsive Report: [URL]
Screenshots Captured
- Mobile (375px): screenshot_mobile.png
- Tablet (768px): screenshot_tablet.png
- Laptop (1280px): screenshot_laptop.png
- Desktop (1920px): screenshot_desktop.png
- Ultrawide (2560px): screenshot_ultrawide.png
Issues Found
- [MOBILE] Horizontal scroll detected — hero section overflows
- [MOBILE] Navigation menu not collapsing — overlaps content
- [TABLET] Card grid shows 3 columns, text truncated
Looks Good
- Desktop and ultrawide layouts render correctly
- Images are responsive
- Footer stacks properly on mobile
适用场景
- 快速检查网站在不同设备尺寸下的显示效果。
- 在开发或发布前发现响应式布局问题。
- 为响应式设计审查生成截图证据。
限制
- 仅使用 Playwright MCP，未提供其他运行方式。
- 需要 Playwright MCP 作为前置条件。
- 关于收费、价格、平台支持范围等更多信息，资料中暂未提供。