视口截图

视口截图只截取网页在浏览器窗口中可见的部分，即视口，并保持其当前尺寸和滚动位置。可见区域上方或下方的内容不会包含在内。图像尺寸等于视口尺寸乘以设备缩放系数，例如 1x 时为 1920×1080，2x 时为 3840×2160。

在 Web 开发中，视口是页面渲染的区域，以 CSS 像素计量。它不包括标签栏、地址栏等浏览器界面元素。因此，视口截图呈现的是访问者第一眼看到的页面，不含周围的浏览器界面。

视口截图与整页截图

视口截图显示一屏内容，和访问者刚打开页面时看到的一样。整页截图则把整个文档从上到下渲染成一张图像。视口截图体积更小、速度更快，也更便于比较。整页截图能显示全部内容，但图像可能非常长，而且可能破坏依赖视口高度的布局。

视口截图的使用场景

• 检查落地页的首屏。
• 缩略图和链接预览。
• 聚焦页眉和首屏主视觉区域的视觉回归测试。
• 以固定设备尺寸进行响应式检查。

视口尺寸与响应式截图

视口宽度决定页面显示哪一种响应式布局。390 像素宽的视口会触发手机布局，1920 则显示桌面布局。Temposhot 的 Website Capture 提供 Desktop 1920×1080、Tablet 768×1024 和 Mobile 390×844，并可为每个网址将 Area 设为 Viewport 或 Full page。

视口截图的常见错误

• 在页面加载或动画结束前就截图。
• 让 Cookie 横幅遮住视口。
• 期望首屏以下的内容也出现在截图中。
• 比较以不同缩放系数截取的图像。

总在重复截取同样的页面？

把网址添加到 Website Capture，设置 Viewport 和设备，然后用最多 10 个 Concurrent browsers 一次完成截取。请参阅截取选项。

常见问题

“above the fold”（首屏）是什么意思？

指无需滚动即可看到的内容，也就是视口截图所呈现的内容。

视口截图包含地址栏吗？

不包含。它只包含渲染出的页面。

参考资料

• Viewport（MDN 术语表）
• Playwright 截图指南

相关资源

• Website Capture 快速入门：第一次运行网址列表。
• Website Capture 选项：设备、截取范围和等待设置。
• 截图分辨率检查器：核对图像尺寸。