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

Question

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

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

我想使用max viewport。

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

Answer 1

我可能会很迟。然而对于其他人，请尝试：

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

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

Answer 2

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

然后，您可以调用Chrome Devtools Protocol方法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 3

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 4

正如本issue所述

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

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