学习 Puppeteer 的视口配置对象（Viewport）

完整视口配置对象

{
  width: 800,          // 视口宽度（像素）
  height: 600,         // 视口高度（像素）
  deviceScaleFactor: 1,// 设备像素比（默认 1，即 1px = 1 设备像素）
  isMobile: false,     // 是否模拟移动设备（影响 User-Agent 和布局）
  hasTouch: false,     // 是否支持触摸事件（仅在 isMobile 为 true 时有意义）
  isLandscape: false   // 是否为横向模式（影响宽高逻辑，如移动端横竖屏）
}

各属性作用详解

1. width 和 height

• • 作用：定义视口的可见区域宽度和高度（以 CSS 像素为单位）。

• • 示例：设置 { width: 1920, height: 1080 } 表示视口为 1920x1080 像素。

• • 注意：截图时若未指定 fullPage: true，截图范围默认为此视口大小。

2. deviceScaleFactor

• • 作用：模拟设备的像素密度（如 Retina 屏），值为 devicePixelRatio（实际设备像素 / CSS 像素）。

• • 示例：deviceScaleFactor: 2 表示 1 CSS 像素 = 2x2 设备像素，渲染更清晰（截图会更大）。

• • 默认值：1（普通屏幕）。

3. isMobile

• • 作用：是否模拟移动设备环境，影响以下行为：

• • • 自动设置移动设备的 User-Agent（如 Mozilla/5.0 (iPhone...）。

• • • 调整视口元标签（viewport-fit=cover 等）。

• • • 影响触摸事件和手势模拟。

• • 示例：模拟手机时设为 true，配合 deviceScaleFactor: 3 模拟高清屏。

4. hasTouch

• • 作用：是否启用触摸事件支持（仅在 isMobile: true 时有效）。

• • 场景：若页面依赖触摸事件（如滑动、点击反馈），需设为 true。

• • 默认值：false（关闭触摸事件）。

5. isLandscape

• • 作用：是否模拟横向（宽 > 高）模式，主要用于移动端横竖屏切换。

• • 影响：当 isMobile: true 时，设为 true 会交换 width 和 height 的逻辑（如手机横屏时宽度为高度，高度为宽度）。

• • 示例：模拟 iPhone 横屏：{ width: 812, height: 375, isMobile: true, isLandscape: true }。

如何修改视口配置？

1. 创建页面时指定：

const page = await browser.newPage({
  viewport: { width: 1200, height: 800, deviceScaleFactor: 2 }
});

2. 动态修改：

await page.setViewport({ width: 600, height: 800, isMobile: true });

注意事项

• 无头模式与视口：在无头模式下，浏览器窗口大小和视口独立，需通过 setViewport 显式设置视口，否则默认使用 800x600。

• 截图与视口：page.screenshot() 默认截取视口区域，若需全屏截图，需设置 fullPage: true 或调整视口高度超过页面内容。