Cfrgtkky

When I run a new page, I must specify size of the viewport using the setViewport function:

await page.setViewport({

    width: 1920,

    height: 1080

})

I want use max viewport.

How can I make the viewport resizable according to the window size?

You can pass the --window-size flag as an argument to puppeteer.launch() to change the window size to your desired width and height.

Then you can call the Chrome Devtools Protocol method Emulation.clearDeviceMetricsOverride to clear the overridden device metrics (including the default 800 x 600 viewport).

This will cause the viewport to match the window size (when taking screenshots, etc).

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

Note: page.viewport() will still return { width: 800, height: 600 }, and the only way to reliably change the values of these properties is to use page.setViewport().

See the complete example below:

'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();

})();

As explained in this issue

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

makes chromium set the viewport by inferring the current screen resolution. Seems to only work with headless: false

I may be very late on this. Nevertheless for others, try:

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

Set the defaultViewport option to null as above to disable the 800x600 resolution. It takes the max resolution then.