什么是视口？

Scrapeless Agent Browser 为渲染页面和捕获浏览器输出的工作流提供可配置的浏览器环境。

视口是浏览器呈现文档的区域。在 Web 开发中，该术语通常与用于布局页面的空间或当前对用户可见的那部分布局有关。视口的大小不一定与物理屏幕、浏览器窗口或完整文档相同。

视口设置会影响响应式导航、换行、图像选择，以及滚动前可见的内容。在自动化中，页面可能“正确加载”，但因为视口改变而暴露出不同的控件。应将视口配置视为页面输入的一部分，而不是偶然的截图设置。

布局视口定义页面的工作空间

布局视口是浏览器用于布局文档的空间。它的尺寸影响响应式规则和内容的排列。

CSS 中的 视口模型 解释了可见页面如何与布局和文档相关。在桌面浏览器中，调整内容区域大小通常会改变布局视口，并可能导致页面在不同的响应式布局之间切换。

文档可以在垂直或水平方向上超出视口。滚动会改变正在查看的部分，但不会让完整文档与视口变成相同大小。这就是为什么一个可见区域很短的页面仍然可以包含一篇长文章。

对于自动化，应记录预期的布局尺寸。在宽布局中存在的导航控件，可能会在窄布局中被菜单按钮替代。页面是在响应其环境；定位器需要表示预期的布局状态。

可视视口描述当前可见内容

可视视口是经过捏合缩放等效果后当前可见的页面部分。它可以与布局视口不同，尤其是在移动设备上。

「 VisualViewport 接口 」公开了有关该可见区域的信息。用户可以放大到布局中的较小区域，而不需要像设备变成更窄的屏幕那样重新计算每一条布局规则。

屏幕上的浏览器控件和键盘也会影响可见区域，其行为取决于浏览器和配置。不要假定可见高度的每一次变化都会在不同设备上产生相同的布局尺寸变化。

这种区分对于覆盖层和固定定位的界面元素很重要。一个控件可以相对于某一种视口概念被正确放置，却在当前可视区域中部分被遮挡。当可访问性或移动端可用性依赖于它时，应测试实际的交互状态。

CSS 像素不是物理显示像素

CSS 像素描述布局单位，而物理显示像素描述硬件的图像网格。设备像素比将物理像素密度与浏览器环境中的 CSS 像素尺寸关联起来。

「 devicePixelRatio 属性 」描述了这种关系。浏览器可以用不同数量的物理像素呈现相同的 CSS 布局，因此仅凭图像的像素尺寸无法完全确定生成它的布局。

对于截图比较，需要区分布局宽度与输出图像分辨率。像素更密集的图像可以表示同样的元素排列。更宽的布局则可能改变换行、导航以及可见列的数量。

更改屏幕信息不一定等同于更改页面视口。验证自动化客户端实际提供的视口 API，并在配置后检查渲染出的布局。

Viewport meta 设置影响移动端布局

viewport meta 设置告诉移动浏览器页面希望其布局视口和初始缩放如何表现。响应式页面通常会请求与设备宽度对齐的布局宽度。

如果缺少适当的设置，移动浏览器可能会使用更宽的布局空间并缩放页面以适配。结果看起来像缩小后的桌面页面，即使物理显示很窄。这是截图的表观尺寸无法揭示其底层 CSS 视口的原因之一。

meta 设置是页面文档的一部分。自动化客户端也有影响视口和设备模拟的环境设置。在假定某个移动配置复现真实设备之前，需要理解这两方面。

仅仅缩小视口并不能复现移动端输入、操作系统行为、浏览器界面或硬件性能。使用它来测试响应式布局，然后再补充实际兼容性问题所需的其他条件。

响应式断点会改变工作流程

当环境条件符合其 CSS 规则时，响应式断点会改变页面的布局。它们会影响自动化任务必须使用哪个控件，以及任务如何访问所请求的记录。

目录在宽屏布局中可能会显示侧边栏筛选器，而在窄屏布局中显示筛选对话框。两者都可以表示相同的底层功能。如果某个工作流假定侧边栏始终存在，那么它就被绑定到一种特定的布局配置上。

围绕预期的交互来构建定位器。在选择隐藏项目前先检查菜单是否已展开，并验证所选过滤器是否改变了预期的记录。截图有助于识别布局，但验收检查应当确认应用程序的状态。

围绕对产品重要的断点进行测试，而不是随意选择设备标签。页面自身的规则决定控件在何处发生变化。测试清单应包含有意义的布局状态，以及最容易受到这些状态影响的交互。

在工作流程中保持视口稳定，除非调整大小本身是测试目的。提取期间调整大小可能会重新排版页面、更改可见性，或导致应用程序重新构建界面组件。

截图需要清晰的捕捉区域

根据所用工具不同，屏幕截图可以捕获视口、选定元素或更大的文档区域。这些捕获类型回答的是不同的问题。

视口图像显示当前滚动位置可见的内容。整页图像表示更大范围的文档区域。元素图像聚焦于特定组件，可能会省略周围的覆盖层或导航内容。

在进行决策时选择合适的捕获类型。要诊断被横幅遮挡的按钮，需要保留足够的周围内容以显示遮挡情况。要比较产品卡片的视觉布局时，与其使用一张很长的页面截图，元素级捕获可能更有用。

在满足已定义的就绪条件后进行捕获。字体、图像和异步内容会在初始导航后改变几何结构。在加载状态下截取的屏幕截图不应被当作代表完整页面来进行比较。

还要记录滚动位置和相关状态。具有相同尺寸的两个视口图像可以显示同一文档的不同部分，这会使表面上的布局变化实际上只是可见内容的差异。

惰性加载将可见性与数据可用性连接起来

懒加载可能会使内容的可用性依赖于滚动或可见性。文档在初始视口就绪时，可能尚未加载所有图像或记录。

对于抽取操作，需要区分隐藏在可见区域之外的内容与尚未创建的内容。滚动操作可能会显示已有节点、触发资源加载，或导致新记录被插入。具体适用哪种行为由应用程序来决定。

虚拟化列表带来了另一项考量：在用户滚动时，文档可能只保留一部分记录作为活动节点。因此，一次性读取当前 DOM 可能会与收集完整的逻辑列表有所不同。

使用具有明确完成条件的有界收集策略。记录标识比假设一屏内容代表整个数据集更有用。在增加滚动量之前，先明确任务范围和页面行为。

在无爬取代理浏览器中的视口规划

无痕代理浏览器 提供受管浏览器环境，其中包含 可配置的指纹信息，包括与屏幕相关的设置。屏幕配置和客户端视口配置仍应作为不同的控件分别进行检查。

通过受支持的自动化客户端设置你想要的布局，然后检查实际页面。确认响应式控件、截图区域以及在该状态下可见的记录。避免假设仅凭屏幕宽度数值就能确定移动端视口。

The Node.js 托管浏览器讨论 提供有关控制远程浏览器的相关背景信息。审阅 无爬取方案 考虑到完整的渲染工作负载，包括浏览器的生命周期和捕获需求。

结论

视口定义了浏览器如何布局或呈现文档的某一部分。在配置自动化时，应区分布局空间、可见区域、像素密度和文档范围。稳定的视口设置和清晰的捕获条件能让截图、交互以及提取的记录更易于比较。