spot_img

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:

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.

spot_img

Subscribe

Related articles

OnePlus 5T Wallpapers Download

Introduction: The OnePlus 5T is a popular smartphone known for...

Airtel’s First Quarterly Loss in 2002: A Closer Look at Jio’s Impact

The telecom industry has witnessed several significant shifts over...

Xiaomi Confirms Investment in Blackshark Gaming Phone Launch set for April 13

An engaging introduction to Xiaomi Confirms Investment in Blackshark...

LG G7 ThinQ M LCD Panel

Introduction:The LG G7 ThinQ M LCD panel is a...

Intel Core i9 Laptops with Optane Memory

Intel Core i9 laptops with Optane Memory combine the...

Apple iOS 11.4 Beta 1

Apple iOS 11.4 Beta 1 is the latest update...

Google Search AI Reorganization: Improving Search Quality and User Experience

Introduction:In the ever-evolving digital landscape, search engines play a...
Peter Graham
Peter Grahamhttp://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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here