How to set max viewport in Puppeteer?

问题

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?

回答1:

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.

回答2:

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

回答3:

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

回答4:

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.

回答5:

It's probably worth mentioning that if you combine puppeteer.launch({defaultViewport: null}) with puppeteer.connect(), again you need to pass {defaultViewport: null}}, otherwise the viewport is adjusted back to default size. So in this case, use:

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

回答6:

For me the combination of defaultViewport: null and args: ['--start-maximized'] gave me fullscreen with view fitting to screensize so:

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

回答7:

I had the same problem and what worked for me is this.

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

回答8:

Here is a way to do it at runtime by calling Page.setViewport() in headful and Browser.setWindowBounds() in headless via a Chrome Devtools Protocol session:

async function setWindowSize(page, width, height) {
  if(headless) {
    const session = await page.target().createCDPSession();
    const {windowId} = await session.send('Browser.getWindowForTarget');
    await session.send('Browser.setWindowBounds', {windowId, bounds: {width: width, height: height}});
    await session.detach();
  } else {
    await page.setViewport({width: width, height: height});
  }
}

See my comment on GitHub for more info.

来源：https://stackoverflow.com/questions/52553311/how-to-set-max-viewport-in-puppeteer

标签

javascript

node.js

google-chrome-devtools

viewport

Puppeteer