响应式截图

响应式截图是指在特定视口宽度和高度下渲染网页后截取的图像，通常会在多个尺寸下各截一张，组成一组。响应式网站使用 CSS 媒体查询、容器查询和弹性布局，因此同一个 URL 在不同宽度下可能显示不同的导航、栏数和图片裁切。

只有视口本身足够窄时，浏览器才会生成手机版布局。缩小桌面端截图并不会改变布局。因此，工具会在页面加载之前设置视口尺寸，通常还会设置设备缩放比例和 User-Agent。

响应式截图的意义

设计评审、客户验收和 QA 都需要证据，说明页面在每个断点下的样子。布局缺陷往往只在某一个宽度下出现，例如平板上菜单与 Logo 重叠。按固定尺寸截取的一组截图，能让这类缺陷在一次评审中全部暴露出来。

常用视口尺寸

类别	视口示例
桌面	1920×1080、1440×900、1366×768
平板	768×1024 竖屏
手机	390×844、360×800

尺寸以 CSS 像素为单位。缩放比例为 3x 的手机以 1170×2532 物理像素渲染 390×844 CSS 像素。

如何截取响应式截图

• 在浏览器中打开开发者工具，切换到设备模式并选择尺寸。
• 在代码中，用 Playwright 或 Puppeteer 在页面跳转之前设置视口。
• 在 Temposhot 的 Website Capture（Command+2）中选择一个 Device：Desktop 1920×1080、Tablet 768×1024 或 Mobile 390×844。每一行 URL 都可以设置自己的设备和 Area，Render preview 可在正式运行前预览其中一行。

响应式截图的常见错误

• 缩放桌面端截图，而不是在目标宽度下重新渲染。
• 在同一组对比中混用视口截图和整页截图。
• 留着占据手机版布局一半画面的 Cookie 横幅。
• 比较以不同缩放比例截取的截图。

需要反复截取相同的截图？

在 Website Capture 中为每个设备各添加一次 URL，然后一次运行整个列表。详见截图选项。

常见问题

响应式截图和手机截图是一回事吗？

不是。手机截图只有一个尺寸。响应式截图是跨多个尺寸的一组截图。

需要使用真实的手机吗？

检查布局时，在浏览器中使用手机视口通常就足够了。特定设备上的缺陷仍需要用真机排查。

参考资料

• Responsive web design（维基百科）
• Viewport（MDN 术语表）

相关资源

• Website Capture 快速入门：第一次运行 URL 列表。
• 运行与结果：行状态与重试。
• 宽高比计算器：检查尺寸的比例。