Responsive Screenshot

A responsive screenshot is a capture of a web page rendered at a specific viewport width and height, usually taken as a set at several sizes. Responsive sites use CSS media queries, container queries and flexible layouts, so the same URL can show a different navigation, column count and image crop at each width.

A browser produces the phone layout only when the viewport itself is narrow. Shrinking a desktop screenshot does not change the layout. Tools therefore set the viewport size, and often the device scale factor and user agent, before the page loads.

Why responsive screenshots matter

Design reviews, client sign-off and QA need evidence of how a page looks at each breakpoint. A layout bug often appears at only one width, such as a menu that overlaps the logo on tablets. A set of captures at fixed sizes makes those bugs visible in one review.

Common viewport sizes

Class	Example viewport
Desktop	1920×1080, 1440×900, 1366×768
Tablet	768×1024 portrait
Phone	390×844, 360×800

Sizes are in CSS pixels. A phone at 3x scale renders 390×844 CSS pixels with 1170×2532 physical pixels.

How to capture responsive screenshots

• In a browser, open developer tools, switch to device mode and pick a size.
• In code, set the viewport in Playwright or Puppeteer before navigation.
• In Temposhot Website Capture (Command+2), choose a Device: Desktop 1920×1080, Tablet 768×1024 or Mobile 390×844. Each URL row can have its own device and Area, and Render preview shows one row before the full run.

Common mistakes with responsive screenshots

• Resizing a desktop capture instead of rendering at the target width.
• Mixing viewport and full-page captures in one comparison set.
• Leaving a cookie banner that covers half of the phone layout.
• Comparing captures taken at different scale factors.

Taking the same screenshots again and again?

Add each URL once per device in Website Capture and run the list in one pass. See capture options.

Common questions

Is a responsive screenshot the same as a mobile screenshot?

No. A mobile screenshot is one size. Responsive screenshots are a set across several sizes.

Do I need a real phone?

For layout checks, a browser at the phone viewport is usually enough. Device-specific bugs still need a real device.

Sources

• Responsive web design on Wikipedia
• Viewport (MDN glossary)

Related resources

• Website Capture quick start: first URL list run.
• Runs and results: row states and retries.
• Aspect ratio calculator: check proportions of a size.