如何在 Puppeteer 中设置最大视口？答案

【问题标题】：How to set max viewport in Puppeteer?如何在 Puppeteer 中设置最大视口？
【发布时间】：2019-03-04 07:58:14
【问题描述】：

当我运行一个新页面时，我必须使用setViewport 函数指定视口的大小：

await page.setViewport({
    width: 1920,
    height: 1080
})

我想使用最大视口。

如何使视口根据窗口大小调整大小？

【问题讨论】：

标签： javascript node.js google-chrome-devtools viewport puppeteer

【解决方案1】：

这是一种在运行时通过 Chrome Devtools 协议会话调用 headful 中的 Page.setViewport() 和 headless 中的 Browser.setWindowBounds() 的方法：

async function setWindowSize(page, width, height) {
  if(headless) {
    const session = await page.target().createCDPSession();
    const {windowId} = await session.send('Browser.getWindowForTarget');
    await session.send('Browser.setWindowBounds', {windowId, bounds: {width: width, height: height}});
    await session.detach();
  } else {
    await page.setViewport({width: width, height: height});
  }
}

请参阅my comment on GitHub 了解更多信息。

【讨论】：

【解决方案2】：

我遇到了同样的问题，对我有用的是这个。

const browser = await puppeteer.launch({
  headless: false,
  args: ['--window-size=1920,1080'],
  defaultViewport: null
  });

【讨论】：

当 headless=true 时使用 await page._client.send('Emulation.clearDeviceMetricsOverride');

【解决方案3】：

对我来说，defaultViewport: null 和 args: ['--start-maximized'] 的组合给了我全屏，视图适合屏幕大小，所以：

browser = await puppeteer.launch({
            headless: false,
            args: [
                '--start-maximized',
            ],
            defaultViewport: null,
        });

【讨论】：

【解决方案4】：

您可以将--window-size 标志作为参数传递给puppeteer.launch()，以将窗口大小更改为所需的width 和height。

然后您可以调用 Chrome Devtools 协议方法 Emulation.clearDeviceMetricsOverride 来清除覆盖的设备指标（包括默认的 800 x 600 视口）。

这将导致视口与窗口大小匹配（截屏时等）。

const browser = await puppeteer.launch({
  args: [
    '--window-size=1920,1080',
  ],
});

const page = await browser.newPage();

await page._client.send('Emulation.clearDeviceMetricsOverride');

await page.screenshot({
  path: 'example.png', // Image Dimensions : 1920 x 1080
});

注意：page.viewport() 仍将返回{ width: 800, height: 600 }，唯一可靠地更改这些属性值的方法是使用page.setViewport()。

请参阅下面的完整示例：

'use strict';

const puppeteer = require('puppeteer');

(async () => {
  /* ============================================================
      Prerequisite: Set Window size
  ============================================================ */

  const browser = await puppeteer.launch({
    args : [
      '--window-size=1920,1080',
    ],
  });

  const page = await browser.newPage();

  await page.goto('https://www.example.com/');

  /* ============================================================
      Case 1: Default Viewport
  ============================================================ */

  console.log('Case 1 - Width  :', page.viewport().width);  // Width  : 800
  console.log('Case 1 - Height :', page.viewport().height); // Height : 600

  await page.screenshot({
    path: 'image-1.png', // Image Dimensions : 800 x 600
  });

  /* ============================================================
      Case 2: Clear Overridden Device Metrics
  ============================================================ */

  await page._client.send('Emulation.clearDeviceMetricsOverride');

  console.log('Case 2 - Width  :', page.viewport().width);  // Width  : 800
  console.log('Case 2 - Height :', page.viewport().height); // Height : 600

  await page.screenshot({
    path: 'image-2.png', // Image Dimensions : 1920 x 1080
  });

  /* ============================================================
      Case 3: Manually Set Viewport
  ============================================================ */

  await page.setViewport({
    width: 1920,
    height: 1080,
  });

  console.log('Case 3 - Width  :', page.viewport().width);  // Width  : 1920
  console.log('Case 3 - Height :', page.viewport().height); // Height : 1080

  await page.screenshot({
    path: 'image-3.png', // Image Dimensions : 1920 x 1080
  });

  /* ============================================================
      Case 4: Revert Back to Default Viewport
  ============================================================ */

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

  console.log('Case 4 - Width  :', page.viewport().width);  // Width  : 800
  console.log('Case 4 - Height :', page.viewport().height); // Height : 600

  await page.screenshot({
    path: 'image-4.png', // Image Dimensions : 800 x 600
  });

  await browser.close();
})();

【讨论】：

tks，使用await page._client.send('Emulation.clearDeviceMetricsOverride'); 使--window-size 工作

【解决方案5】：

可能值得一提的是，如果将puppeteer.launch({defaultViewport: null}) 与puppeteer.connect() 结合使用，则需要再次传递{defaultViewport: null}}，否则视口将调整回默认大小。所以在这种情况下，使用：

await puppeteer.connect({browserWSEndpoint: ws, defaultViewport: null})

【讨论】：

【解决方案6】：

const browser = await puppeteer.launch( {"headless": false, args: ['--start-maximized'] } );
const page = await browser.newPage();
await page.setViewport({width:0, height:0});

" const browser = ..." 行最大化您的 chrome 窗口。但请注意，页面是需要设置视口的位置，并且在您创建页面时它仍将保持默认大小。

当您将视口的宽度和高度设置为“0”时，页面视口大小将等于浏览器的大小。

【讨论】：

【解决方案7】：

我可能已经很晚了。不过对于其他人，请尝试：

const browser = await puppeteer.launch({defaultViewport: null});

如上所述将defaultViewport 选项设置为null 以禁用800x600 分辨率。那么它需要最大分辨率。

【讨论】：

@gdoron 在他们的文档中提到，puppeteer.launch(options)。请参阅defaultViewport 选项，它明确指出将其设置为null，它会禁用默认视口 + 它对我有用。
为我工作过： const browser = await puppeteer.launch({ headless: false, defaultViewport: null });
当禁用无头模式并以可视方式启动 Chromium 时，这确认视口使用其最大允许大小。与 pdf 选项 preferCSSPageSize: true 一起，可以更轻松地设置 pdf 的样式。
就我而言，您的答案和@Grant Miller 的答案（即使用参数设置窗口大小）都是解决方案

【解决方案8】：

正如issue中所解释的那样

page.setViewport({ width: 0, height: 0 });

通过推断当前屏幕分辨率使 chromium 设置视口。似乎只适用于headless: false

【讨论】：