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.