Table of contents

How can I set viewport in Puppeteer?

Setting Viewport in Puppeteer

In Puppeteer, the viewport controls the visible area of the browser page. The page.setViewport() method allows you to configure the page dimensions and device characteristics, which is essential for responsive web scraping and screenshot testing.

Basic Viewport Configuration

The simplest way to set a viewport is by specifying width and height:

const puppeteer = require('puppeteer');

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

  // Set viewport dimensions
  await page.setViewport({
    width: 1280,
    height: 800
  });

  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

Complete Viewport Options

The setViewport() method accepts several options for advanced configuration:

await page.setViewport({
  width: 1920,           // Viewport width in pixels
  height: 1080,          // Viewport height in pixels
  deviceScaleFactor: 2,  // Device pixel ratio (default: 1)
  isMobile: false,       // Whether to emulate mobile device
  hasTouch: false,       // Whether to enable touch events
  isLandscape: true      // Screen orientation
});

Common Viewport Configurations

Desktop Viewport

// Standard desktop viewport
await page.setViewport({
  width: 1366,
  height: 768,
  deviceScaleFactor: 1
});

Mobile Viewport

// iPhone-like mobile viewport
await page.setViewport({
  width: 375,
  height: 667,
  deviceScaleFactor: 2,
  isMobile: true,
  hasTouch: true,
  isLandscape: false
});

High-DPI Display

// Retina/high-DPI display
await page.setViewport({
  width: 1440,
  height: 900,
  deviceScaleFactor: 2
});

Tablet Viewport

// iPad-like tablet viewport
await page.setViewport({
  width: 768,
  height: 1024,
  deviceScaleFactor: 2,
  isMobile: true,
  hasTouch: true,
  isLandscape: false
});

Multiple Viewport Testing

You can test different viewports within the same script:

const puppeteer = require('puppeteer');

const viewports = [
  { width: 1366, height: 768, name: 'desktop' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 375, height: 667, name: 'mobile' }
];

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

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

  for (const viewport of viewports) {
    await page.setViewport({
      width: viewport.width,
      height: viewport.height
    });

    await page.screenshot({ 
      path: `screenshot-${viewport.name}.png`,
      fullPage: true 
    });
  }

  await browser.close();
})();

Important Notes

  • Timing: Always call setViewport() before navigating to a page for consistent results
  • Default viewport: New pages have a default viewport of 800x600 pixels
  • CSS media queries: Viewport settings affect CSS media query evaluation
  • Responsive design: Essential for testing responsive websites and mobile layouts
  • Screenshot dimensions: Viewport size directly impacts screenshot output

The viewport configuration is crucial for accurate web scraping and testing across different device types and screen sizes.

Try WebScraping.AI for Your Web Scraping Needs

Looking for a powerful web scraping solution? WebScraping.AI provides an LLM-powered API that combines Chromium JavaScript rendering with rotating proxies for reliable data extraction.

Key Features:

  • AI-powered extraction: Ask questions about web pages or extract structured data fields
  • JavaScript rendering: Full Chromium browser support for dynamic content
  • Rotating proxies: Datacenter and residential proxies from multiple countries
  • Easy integration: Simple REST API with SDKs for Python, Ruby, PHP, and more
  • Reliable & scalable: Built for developers who need consistent results

Getting Started:

Get page content with AI analysis:

curl "https://api.webscraping.ai/ai/question?url=https://example.com&question=What is the main topic?&api_key=YOUR_API_KEY"

Extract structured data:

curl "https://api.webscraping.ai/ai/fields?url=https://example.com&fields[title]=Page title&fields[price]=Product price&api_key=YOUR_API_KEY"

Try in request builder

Related Questions

Get Started Now

WebScraping.AI provides rotating proxies, Chromium rendering and built-in HTML parser for web scraping
Icon