How to set max viewport in Puppeteer?

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.

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