How to capture responsive website screenshots for a client presentation

To capture responsive website screenshots for a client presentation, use Chrome DevTools Device Mode to set a viewport, then capture either the visible viewport or the full page. Record the viewport dimensions and capture context with each image so clients can compare the same page at clearly defined sizes. Device Mode approximates mobile appearance; it does not prove how the page behaves on a physical phone.

Choose the screenshot that answers the presentation question

Viewport screenshot: Shows what fits in the selected viewport. Use it to discuss the initial on-screen impression, navigation, or content visible without scrolling.
Full-size screenshot: Includes page content beyond the current viewport. Use it to discuss overall page structure or how content is arranged down the page.

For a responsive comparison, capture the same page or component at the widths relevant to the design decision. Keep the capture type consistent across alternatives unless the presentation is explicitly comparing different things.

Capture responsive screenshots in Chrome DevTools

Open the website in Chrome and open DevTools.
Turn on Device Mode.
Choose Responsive dimensions and enter a width and height, or select a device preset when a named profile is relevant. Device Mode also has a device-frame option for device-specific emulation.
Set dimensions that help explain the design decision. Record the width and height for every capture.
Open More options and choose Capture screenshot for the current viewport, or Capture a full size screenshot to include the page beyond the viewport.
Save and label the image with the page or section, viewport dimensions, and capture context.
Review each export at the size it will appear in the presentation. Check that the relevant content is readable and that banners, menus, loading states, or other transient content do not obscure it.

Example comparison set

For a discussion about how a page adapts, capture the same page at a desktop width and one or more narrower widths that matter to the design. Use viewport captures to show what fits on screen. Add full-page captures if the discussion is about the page’s complete structure. Label each image consistently, for example: Homepage — 1280 × 800 — viewport.

Make the presentation easy to review

Use the same page, content state, and capture type when comparing widths.
Put dimensions and capture context in a caption or filename, rather than relying on memory.
Choose widths that clarify the decision at hand; a long list of arbitrary sizes makes comparisons harder to scan.
Inspect exports at presentation size. If text or controls are too small to read, use a closer crop or a larger presentation view while preserving the original screenshot for context.
Capture after the page has reached the state you intend to discuss. A cookie banner, open menu, or loading state can change what the screenshot communicates.

Understand what Device Mode can and cannot show

Chrome describes Device Mode as a “first-order approximation” of how a page looks and feels on a mobile device. It simulates a mobile experience from a desktop or laptop, and some device behavior cannot be simulated. Do not present an emulated screenshot as proof that the site was tested on a physical phone. When device-specific behavior matters, check the page on a real device using remote debugging. Chrome DevTools: Simulate mobile devices with Device Mode.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Set a viewport and request an image in one call; see the ScreenshotNeo API documentation for the available options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Replace the example URL with the page you want to capture. Add a viewport width and height using the documented API parameters for repeatable responsive comparisons. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

Troubleshooting

Problem	Likely cause	What to do
The screenshot has the wrong dimensions	Device Mode dimensions were not set as intended, or the wrong capture command was used.	Confirm the width and height before capture. Use the viewport command for the visible area and the full-size command for the page beyond it.
The image cuts off content you expected to show	A viewport capture only shows the selected viewport.	Capture the full page when the overall page structure matters, or keep a viewport shot when the on-screen content is the subject.
A banner or menu covers the design	The page was captured with a transient overlay visible.	Dismiss it or capture the intended state, then review the exported image before adding it to the deck.
A mobile screenshot is being treated as a real-device result	Device Mode is an approximation, not a physical phone.	Describe it as an emulated responsive view. Check on a real device when device-specific behavior matters.
Two designs are hard to compare	The captures use different pages, viewport sizes, or capture contexts.	Repeat the captures with consistent dimensions, page state, and screenshot type, and label each image.

Performance, reliability, and cost

Chrome DevTools is a built-in, manual workflow: it is useful for a small set of presentation captures without setting up an API. The practical cost is the time needed to set dimensions, capture each state, label files, and review the results. If the client decision depends on actual device behavior, include a real-device check; emulation alone does not establish that behavior.

For recurring captures or a larger set of URLs and viewports, an API can make the capture process repeatable. ScreenshotNeo supports viewport settings, full-page captures, device presets, and other capture options; its response headers report page verdict and billing status. Review the documentation for the parameters and choose the capture type that matches the presentation. ScreenshotNeo bills only clean shots; cache hits, bot checks, blank pages, timeouts, and failed loads cost nothing.

FAQ

Should I use a device preset or custom responsive dimensions?

Use a preset when a named device profile helps explain the presentation. Use custom dimensions when the design decision concerns a specific viewport width and height.

Should every presentation image be full page?

No. Use a viewport capture to show what fits on screen, and a full-size capture when the page’s overall structure is relevant.

Does an emulated mobile screenshot confirm the site works on a phone?

No. Device Mode is an approximation. Check on a real device when physical-device behavior is part of the claim.