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

Question

运行新页面时，必须使用以下setViewport函数指定视口的大小：

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

我想使用最大视口。

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

Answer 1

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

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

将defaultViewport选项设置null为如上，以禁用800x600分辨率。然后需要最大分辨率。

Answer 2

如本期所述

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

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

Answer 3

您可以将--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();
})();

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

the " const browser = ..." line maximizes your chrome window. But note that the page is where the viewport needs to be set and it would still be at the default size when you create the page.

When you set the viewport with width and height as "0", the page viewport size becomes equal to size of the browser.