视口截图

视口截图只截取特定时刻浏览器或应用窗口中可见的内容，不多也不少，反映用户在屏幕上真正会看到的画面。

视口截图与整页截图

视口截图只截取当前可见区域，整页截图则从上到下截取全部可滚动内容。具体选择取决于目标。

如果可见状态本身很重要，例如首屏内容、模态对话框、工具提示或特定滚动位置，视口截图更合适。审阅者需要了解完整页面布局时，则应使用整页截图。

多数普通截图，也就是按键截取屏幕，默认都是视口截图。需要与整页截图或滚动截图区分时，这个词才显得重要。

视口截图的应用场景

• 首屏审核——检查用户滚动前看到的内容，这会影响第一印象和转化。
• 模态框与对话框截图——记录只出现在可见区域中的弹窗、工具提示和叠加层。
• 问题报告——记录问题发生时用户所见的准确画面，包括滚动位置。
• 响应式测试——以不同视口尺寸截取同一页面，验证布局行为。
• A/B 测试记录——保留用户进入页面时会看到的具体版本。

视口尺寸与响应式截图

视口尺寸决定屏幕中能容纳多少内容。响应式测试常用的宽度包括：

• 1440 px——大型桌面设备。
• 1280 px——标准桌面设备。
• 1024 px——小型桌面设备或大型平板电脑。
• 768 px——竖向平板电脑。
• 375 px——iPhone 级别的移动设备。

自动截图工具和浏览器开发者工具允许设置自定义视口尺寸，以模拟这些大小。团队正是通过这种方式制作响应式截图：以多个视口宽度截取同一 URL，确认布局可以正确适应。

视口截图的常见错误

• 没有说明视口尺寸。 不知道窗口大小时，视口截图很难理解。分享供他人审阅时，尤其应注明视口尺寸。
• 混淆视口内容与整页内容。 视口截图可能遗漏首屏下方的重要内容。审阅者需要全貌时，整页截图更合适。
• 使用少见的窗口尺寸。 浏览器窗口宽度随意时，布局可能不符合真实用户的观看环境。应采用标准视口尺寸，生成有意义的截图。
• 忘记设备像素比。 在高 DPI（Retina）显示器上，1440 px 视口会生成宽度为 2880 px 的图像。这会影响文件大小，以及图像在非 Retina 屏幕上的显示方式。