What is the use of the setViewport method in Puppeteer?

Puppeteer, created by Google, is a Node.js library offering an advanced API for managing both headless and headful browsers via the DevTools Protocol.

Syntax

Following is the syntax used to resize the page.

await page.setViewport({
  width: 500,
  height: 400,
  hasTouch: false,
  isLandscape: false,
  isMobile: false,
  deviceScaleFactor: 1,
});
Puppeteer syntax to resize a page

The page.setViewport() also includes optional parameters that are used to further customize the viewport settings. They are the following:

  • hasTouch: It is used to disable touch events, useful when emulating a device without touch capabilities. The default value is false.

  • isLandscape: It is used to set the orientation to landscape mode. The default value is false.

  • isMobile: It is used to emulate a non-mobile device, affecting how the page is rendered. The default value is set as false.

  • deviceScaleFactor: It is used to specify the device scale factor, influencing the scale of the page content. deviceScaleFactor is commonly set to 1 for standard displays, but for devices with high-density screens (like Retina displays), it can be higher. Some common values for deviceScaleFactor other than 1 are 0, 1.5, 2, and 3.

The await keyword in JavaScript is used to pause the execution of the script until the Promise returned by the following method is resolved.

Code example

Execute the following code example by clicking the "Run" button below the code and observe the resizing of the pages to the given sizes in the "Output" tab.

Note: It may take a few seconds for the pages to open so be patient please. You may see the logs (messages printed with console.log()) in the "Terminal" tab.

const puppeteer = require('puppeteer');
(async () => {
  console.log("Opening the browser in headful mode.....")
  // Launch a headful browser to see the effect of setViewPort method
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox']
  });
  // Resize page1
  const page1 = await browser.newPage();
  await page1.setViewport({
    width: 500,
    height: 400,
    hasTouch: false,
    isLandscape: false,
    isMobile: false,
    deviceScaleFactor: 1,
  });
  await page1.goto('https://www.google.com');
// Resize page2
  const page2 = await browser.newPage();
  await page2.setViewport({
    width: 800,
    height: 650,
    hasTouch: false,
    isLandscape: false,
    isMobile: false,
    deviceScaleFactor: 1,
  });
  await page2.goto('https://www.educative.io');
})();
Running code example for resizing web pages with Puppeteer

Note: We are passing the --no-sandbox argument to the puppeteer.launch() function to disable sandboxing to open the browser on the Educative platform. If you're running the script on your local machine, this argument might be unnecessary in your command.

Code explanation

Here is a breakdown of the above code:

  • Line 1: We import the Puppeteer library using the require function in Node.js. This action loads the Puppeteer module, making all of its functionality accessible within the script under the variable name puppeteer.

  • Line 2: We define an asynchronous function using the async keyword. This function is immediately invoked. Inside this function, we can use the await keyword to pause execution and wait for promises to resolve. Inside this function:

    • Line 5: We launch a headful browser using Puppeteer.

    • Lines 10–19 and 21–30: We create two new browser pages using Puppeteer's newPage() method, set each page dimension using setViewport() method, and on each page, we navigate to a different URL using goto() method to see the effect of customized page dimensions.

Unlock your potential: Puppeteer fundamentals series, all in one place!

To deepen your understanding of Puppeteer, explore our series of Answers below:

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved