Viewport Screenshot

A viewport screenshot captures exactly what is visible in the browser or app window at a specific moment — no more, no less — reflecting what a user would actually see on screen.

Viewport screenshot vs full-page screenshot

A viewport screenshot captures only the currently visible area. A full-page screenshot captures the entire scrollable content from top to bottom. The choice depends on the goal.

Viewport screenshots are the right choice when the visible state is what matters — above-the-fold content, a modal dialog, a tooltip, or a specific scroll position. Full-page screenshots are better when the reviewer needs the complete page layout in context.

Most regular screenshots — pressing a key to capture the screen — are viewport screenshots by default. The term becomes important when distinguishing from full-page or scrolling captures.

Where viewport screenshots are used

• Above-the-fold audits — checking what users see before scrolling, which affects first impressions and conversion
• Modal and dialog capture — documenting popups, tooltips, and overlays that only appear in the visible area
• Bug reports — capturing exactly what the user sees when a problem occurs, including scroll position
• Responsive testing — capturing the same page at different viewport sizes to verify layout behavior
• A/B test documentation — preserving the visible variant a user would see upon landing

Viewport sizes and responsive capture

Viewport size determines what fits on screen. Common widths used in responsive testing:

• 1440px — large desktop
• 1280px — standard desktop
• 1024px — small desktop / large tablet
• 768px — tablet portrait
• 375px — mobile (iPhone-class)

Automated capture tools and browser DevTools let you set custom viewport dimensions to simulate these sizes. This is how teams produce responsive screenshots — the same URL captured at multiple viewport widths to verify the layout adapts correctly.

Common mistakes with viewport screenshots

• Not specifying the viewport size. A viewport screenshot without context about the window dimensions is hard to interpret. Always note the viewport size, especially when sharing for review.
• Confusing viewport content with full-page content. A viewport screenshot may miss important content below the fold. If the reviewer needs the full picture, a full-page capture is more appropriate.
• Capturing at an unusual window size. If the browser window is an arbitrary width, the layout may not match what real users see. Use standard viewport sizes for meaningful captures.
• Forgetting device pixel ratio. On high-DPI (Retina) displays, a 1440px viewport produces an image that is 2880px wide. This affects file size and how the image appears on non-Retina screens.