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:
Desktop
- 1920×1080
- 1366×768
- 1440×900
- 1280×720
Mobile
- 414×896
- 375×667
- 360×640
- 360×780
Tablet
- 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.