A Developer Guide to Viewport Sizes for Screenshots

Short summary

A practical guide to choosing correct viewport sizes for automated screenshots using Puppeteer and Playwright, covering defaults, device pixel ratios, user agent strings, and full-page screenshot pitfalls like lazy loading and sticky elements. The author recommends testing at your own CSS breakpoints rather than generic device lists, and provides concrete viewport values for desktop, laptop, tablet, mobile, social previews, and PDF output. Key takeaway: always explicitly set viewport dimensions in headless browsers, as defaults (800x600 in Chromium) will produce broken screenshots in CI.

• •Headless Chromium defaults to 800x600 and Playwright to 1280x720 — always set viewport explicitly
• •Match viewports to your actual analytics and CSS breakpoints, not generic device lists
• •Account for device pixel ratio and user agent for mobile fidelity; force-scroll for lazy-loaded content in full-page screenshots

Generated with AI, which can make mistakes.