Learn How to Set the Viewport in Puppeteer?

One of the most popular headless chrome APIs for Node is called Puppeteer. It has a lot of features and syntax that are easy to understand. Sometimes you need to change the size of your headless browser’s windows or make it act like a certain device. Here’s how to set Puppeteer’s viewport.

How to Set the Viewport in Puppeteer?

Use the “setViewport” function on your page object in Puppeteer to set the viewport.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  //Code to Set Viewport
  await page.setViewport({
        width: 1920,
        height: 1080

  await page.goto('https://www.example.com');
  await browser.close();

Once you’ve made a new page in your Puppeteer browser instance, you can change its viewport to change the resolution.

It’s a good idea to set your viewport before you go to the URL. If you change the viewport size after the page has loaded, many sites won’t look right.

The setViewport function will accept an object with the following properties:

  • width: pixel width of the viewport (required)
  • height: pixel height of viewport (required)
  • is the landscape: identifies that the viewport is in landscape mode (optional) (default false)
  • isMobile: identifies that the viewport is on a mobile device (optional) (default false)
  • hasTouch: identifies if the viewports supports touch events (optional) (default false)
  • device scale factor: sets the DPR (optional) (default 1)


You have to set the width and height when setting the viewport, but you don’t have to set the other arguments. Both height and width are set in pixels. Here are some of the most commonly used resolutions on different devices:


  • 1920×1080
  • 1366×768
  • 1440×900
  • 1280×720


  • 414×896
  • 375×667
  • 360×640
  • 360×780


  • 1280×800
  • 962×601
  • 800×1280
  • 768×1024

You can use the “emulate” function to make your puppeteer instance look like a mobile device.

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['Galaxy Note II'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  await browser.close();

The emulate function changes both the device’s user agent and its viewport. Here you can find a list of the devices that can be used, along with their screen sizes and user agents.

Now you know how to change the viewport in Puppeteer and how to emulate devices directly.



Related articles

How to get million views on youtube?

To get a million views on YouTube, you will...

Can I create a custom dashboard in react?

Yes, you can create a custom dashboard in React....

All You Need to Know About Xbox 360 Backward Compatibility

The Xbox 360 works well with some games that...

How to Check if an Array has More than One Element in PHP?

An array is a group of data structures. In...

Learn How to Select All in VIM?

Now is the time to improve your VIM skills...
Peter Graham
Peter Grahamhttps://fix-iphones.com
Hi there! I'm Peter, a software engineer and tech enthusiast with over 10 years of experience in the field. I have a passion for sharing my knowledge and helping others understand the latest developments in the tech world. When I'm not coding, you can find me hiking or trying out the latest gadgets.


Please enter your comment!
Please enter your name here