Principle:Puppeteer Puppeteer Device Emulation
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Responsive_Design, Testing |
| Last Updated | 2026-02-11 23:00 GMT |
Overview
A technique that configures a browser page to simulate the viewport dimensions and user agent string of a specific device.
Description
Device Emulation allows automation scripts to test how web pages render and behave on different devices (phones, tablets, etc.) without needing physical hardware. It works by:
- Setting the viewport to match the target device's screen dimensions and pixel ratio
- Overriding the user agent string to match the target device's browser identification
- Optionally enabling touch event simulation
Puppeteer provides a built-in catalog of known device descriptors (KnownDevices) covering popular phones and tablets (iPhone, iPad, Pixel, Galaxy, etc.) with pre-configured viewport and user agent values.
Usage
Use device emulation when capturing screenshots of responsive layouts, testing mobile-specific behavior, or verifying that a page adapts correctly to different screen sizes. Apply emulation before navigating to the target URL so that the page renders with the correct viewport from the start.
Theoretical Basis
Device emulation modifies two independent browser properties simultaneously:
# Emulation = Viewport + User Agent
emulate(device) =>
setViewport({
width: device.viewport.width,
height: device.viewport.height,
deviceScaleFactor: device.viewport.deviceScaleFactor,
isMobile: device.viewport.isMobile,
hasTouch: device.viewport.hasTouch,
isLandscape: device.viewport.isLandscape
})
+
setUserAgent(device.userAgent)
The viewport setting affects CSS media queries and layout calculations. The user agent string affects server-side content negotiation and client-side feature detection.