Implementation:Puppeteer Puppeteer Viewport

Property	Value
sources	packages/puppeteer-core/src/common/Viewport.ts
domains	Page Configuration, Device Emulation, Display
last_updated	2026-02-12 00:00 GMT

Overview

Description

Viewport is a public interface that defines the configuration for a page's viewport dimensions and device emulation properties. It is used throughout Puppeteer to control how pages are rendered, including screen size, device pixel ratio, and mobile/touch emulation.

The interface defines the following properties:

• width (required) -- The page width in CSS pixels. Setting to 0 resets to the system default.
• height (required) -- The page height in CSS pixels. Setting to 0 resets to the system default.
• deviceScaleFactor (optional) -- The device scale factor (DPR). Defaults to 1. Setting to 0 resets to the system default.
• isMobile (optional) -- Whether the meta viewport tag is taken into account. Defaults to false.
• isLandscape (optional) -- Whether the viewport is in landscape mode. Defaults to false.
• hasTouch (optional) -- Whether the viewport supports touch events. Defaults to false.

Usage

The Viewport interface is used with page.setViewport(), puppeteer.launch({ defaultViewport }), and the built-in device descriptors for device emulation. Puppeteer's default viewport is { width: 800, height: 600 }.

Code Reference

Source Location

packages/puppeteer-core/src/common/Viewport.ts

Signature

export interface Viewport {
  width: number;
  height: number;
  deviceScaleFactor?: number;
  isMobile?: boolean;
  isLandscape?: boolean;
  hasTouch?: boolean;
}

Import

import type {Viewport} from 'puppeteer-core/lib/esm/puppeteer/common/Viewport.js';

I/O Contract

Property	Type	Required	Default	Description
width	number	Yes	--	Page width in CSS pixels; 0 resets to system default
height	number	Yes	--	Page height in CSS pixels; 0 resets to system default
deviceScaleFactor	number	No	1	Device pixel ratio; 0 resets to system default
isMobile	boolean	No	false	Whether meta viewport tag is considered
isLandscape	boolean	No	false	Whether viewport is in landscape mode
hasTouch	boolean	No	false	Whether viewport supports touch events

Usage Examples

import puppeteer from 'puppeteer';

// Launch with a custom default viewport
const browser = await puppeteer.launch({
  defaultViewport: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 2,
  },
});

const page = await browser.newPage();

// Set viewport to mobile dimensions
await page.setViewport({
  width: 375,
  height: 812,
  isMobile: true,
  hasTouch: true,
  deviceScaleFactor: 3,
});

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

// Set viewport to landscape tablet
await page.setViewport({
  width: 1024,
  height: 768,
  isLandscape: true,
  isMobile: true,
  hasTouch: true,
});

// Disable default viewport (use browser's default)
const browser2 = await puppeteer.launch({
  defaultViewport: null,
});

await browser.close();

Related Pages

• Environment:Puppeteer_Puppeteer_Node_18_Runtime