Question

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

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

我要使用最大视口。

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

Answer 1

对我来说，defaultViewport: null和args: ['--start-maximized']的组合使我全屏显示并适合屏幕尺寸，因此：

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

Answer 2

我对此可能太迟了。不过，对于其他人，请尝试：

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

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

Answer 3

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

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

Answer 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();
})();

Answer 5

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

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

Answer 6

如本issue

中所述

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

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

Answer 7

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”时，页面视口的大小将等于浏览器的大小。

Answer 8

这是在运行时通过Chrome Devtools协议会话在头上调用vpermi2d在头上调用vpermt2d的一种方式：

Page.setViewport()

有关更多信息，请参见my comment on GitHub。

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

8 个答案: