How to Capture Website Screenshots in a Mobile Viewport

A mobile viewport screenshot shows a web page at phone-sized browser dimensions. For a one-off image, use Chrome DevTools or Firefox Responsive Design Mode. For repeatable captures, use Playwright with a device descriptor or an explicit viewport. Decide first whether you need the visible viewport or the entire scrollable page: the former captures what fits on screen, while the latter captures the full page.

These methods emulate a mobile browser inside a desktop browser. They do not prove that the page behaves exactly like it does on physical phone hardware. Chrome describes Device Mode as a “first-order approximation” and recommends real-device testing when hardware behavior matters. Chrome Device Mode documentation

Choose the right capture method

Need	Best choice	Why
One quick screenshot	Chrome Device Mode	Pick a device or enter dimensions, then save the viewport or full page.
Firefox-specific testing	Responsive Design Mode	Includes device, orientation, DPR, touch and camera controls.
Repeatable screenshots	Playwright	Script dimensions, device settings, output format and full-page behavior.
API-based or server-side capture	ScreenshotNeo	Clean shots, only clean shots billed, and a $5 paid plan for 3,000 shots.

Capture a mobile viewport screenshot in Chrome

Open the target page in Chrome.
Open DevTools, then click Toggle device toolbar. Device Mode starts with responsive dimensions.
In the Dimensions menu, select a mobile preset or enter a precise width and height. Rotate the viewport for landscape captures.
Set device pixel ratio or device type when your check depends on them. You can add a custom device with its own name, width, height, DPR, user agent and device type.
Refresh the page at the selected dimensions. Scroll or open menus until the state you want is visible.
Open the DevTools menu and choose Capture screenshot for the visible viewport, or Capture a full size screenshot for the entire scrollable page.

Viewport versus full page: Capture screenshot saves only the area currently visible inside the emulated phone. Capture a full size screenshot extends the image beyond the viewport so it includes the page’s scrollable content.

Chrome checklist

Confirm the width and height shown in the device toolbar.
Refresh after changing dimensions so responsive breakpoints and lazy content recalculate.
Wait for fonts, images and client-rendered content before saving.
Use a full-size capture only when a long page is useful; it can create a very tall image.
Use a real phone when the result depends on mobile CPU behavior, browser differences or physical input.

Capture with Firefox Responsive Design Mode

Open Firefox Developer Tools and choose Responsive Design Mode. The shortcut is Ctrl+Shift+M on Windows/Linux or Cmd+Option+M on macOS.
Select a listed device or edit the viewport width and height.
Set orientation and DPR as needed. A custom device can define screen size, DPR, user agent and touch support.
Prepare the page state, then click the camera button to save the screenshot to Firefox’s default download location.

Firefox can also copy the result to the clipboard. Its mode includes touch simulation and approximate network throttling, which helps when you are checking interaction or loading behavior as well as appearance. See Mozilla’s Responsive Design Mode documentation.

Automate mobile screenshots with Playwright

Playwright is suitable when you need the same URL captured repeatedly, across several viewport sizes, browsers or deployment environments. Device descriptors can provide a viewport, screen settings, user agent and touch capability; you can override the viewport for a known width and height. The predefined descriptor’s user-agent setting assumes a platform, so adjust it when that assumption does not match your test. Playwright emulation documentation

Install Playwright

npm install playwright
npx playwright install chromium

Capture a visible mobile viewport

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...devices['iPhone 13']
  });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'mobile-viewport.png', type: 'png' });
  await browser.close();
})();

page.screenshot() captures the visible page area by default. PNG, JPEG and WebP are supported. See the Playwright Page screenshot API.

Use an explicit viewport

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 390, height: 844 },
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true
  });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: '390x844.png', scale: 'css' });
  await browser.close();
})();

Use scale: 'css' for one output pixel per CSS pixel. Use scale: 'device' when you want device pixels; high-DPI settings can make the resulting file larger.

Capture the full scrollable page

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({ ...devices['iPhone 13'] });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'mobile-full-page.png', fullPage: true });
  await browser.close();
})();

fullPage: true captures the whole scrollable page. Long pages may contain sticky headers repeatedly or reveal content that only appears after scrolling; inspect the output when visual accuracy matters.

Capture a specific element

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({ ...devices['iPhone 13'] });
  const page = await context.newPage();
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.locator('main').screenshot({ path: 'main-mobile.png' });
  await browser.close();
})();

Wait for the page state you actually need

Network idle does not guarantee that a page is visually ready. Add a selector wait when a key component must exist, or a short delay when an animation or deferred image needs time to settle.

await page.goto('https://example.com');
await page.locator('[data-testid="hero"]').waitFor({ state: 'visible' });
await page.waitForTimeout(500);
await page.screenshot({ path: 'ready.png' });

For deterministic output, disable animations in a test stylesheet, use stable test data, and avoid capturing while a cookie dialog, menu transition or carousel is moving.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP or PDF. Configure a mobile viewport with its viewport options, then use the same request pattern shown below. Full-page capture, retina scale, custom CSS and JavaScript, selector capture, device presets and waiting controls are available. The ScreenshotNeo API documentation lists the options.

cURL

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

Python

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)

Node.js

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

Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads and cache hits cost nothing; response headers identify the page verdict and whether the request was billed. ScreenshotNeo also has an MCP server so Claude, Cursor and other MCP clients can call take_screenshot, get_page_info and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Viewport settings that affect the result

Setting	Use it when	Common mistake
Width and height	You need to exercise a specific responsive breakpoint.	Using a named phone without recording its actual dimensions.
DPR or device scale	You are checking image sharpness or producing a high-density asset.	Comparing a device-pixel image with a CSS-pixel baseline.
User agent	The site serves different markup to mobile browsers.	Assuming viewport width alone changes server-side behavior.
Touch support	Menus or gestures depend on touch capability.	Calling a screenshot proof that touch interaction works on hardware.
Orientation	You need portrait and landscape variants.	Changing orientation without checking layout after reload.

Troubleshooting

Symptom	Cause	Fix
The screenshot is desktop-sized	The device toolbar or Playwright context was not applied.	Set the viewport before navigation and reload the page.
Only the visible area was saved	Viewport capture is the default.	Use Chrome’s full-size command or Playwright’s `fullPage: true`.
Images are missing	Lazy loading has not triggered, or the capture happened too soon.	Wait for the relevant selector, scroll if needed, then capture after the image loads.
Text or layout shifts between runs	Web fonts, animations, ads or dynamic data are still changing.	Wait for fonts and key selectors, disable motion, and use stable data.
A mobile menu does not open	The page needs touch or a click before capture.	Enable touch emulation where appropriate and perform the click in the script.
The image is unexpectedly huge	Device scale or full-page output multiplies pixels.	Use CSS scale, reduce DPR, or capture the viewport instead of the full page.
Playwright cannot launch	The browser binary is not installed.	Run `npx playwright install chromium` and check the runtime permissions.
The result does not match a real phone	Desktop emulation cannot reproduce every hardware or browser detail.	Validate important behavior on the target physical device.

Performance, reliability and cost

Fastest one-off workflow: DevTools avoids writing code and saves immediately.
Repeatability: Playwright makes dimensions, waits, output names and browser versions explicit, which is useful in visual regression jobs.
Concurrency: Reuse a browser process and create contexts for multiple viewport cases instead of launching a new browser for every image.
Page weight: Full-page and device-pixel captures require more memory and produce larger files. Prefer CSS scale for compact comparison artifacts.
Reliability: Wait for the specific content that matters, keep network-dependent pages stable, and record the viewport, DPR, browser and URL with each artifact.
Physical confidence: Emulation checks responsive layout; it does not replace real-device testing for performance, sensors, input or browser-specific behavior.
API cost: ScreenshotNeo bills only clean shots. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response exposes verdict and billing headers.

FAQ

What dimensions should I use for a mobile screenshot?

Use the dimensions required by your design or test case. A named device preset is convenient; an explicit width and height are better when a breakpoint must be reproduced exactly.

Is a mobile viewport screenshot the same as a phone screenshot?

No. It is a browser emulation on a desktop environment. Use a physical phone when CPU, browser implementation, sensors, input or device performance affects the result.

How do I capture only what a user can currently see?

Use Chrome’s Capture screenshot or Playwright’s default page.screenshot() without fullPage.

How do I capture a whole mobile page?

Use Chrome’s Capture a full size screenshot or set fullPage: true in Playwright.

Should I use DPR or device scale?

Use it when output sharpness or high-density assets matter. Keep the setting consistent across runs when comparing screenshots.

Can an API capture mobile viewports?

Yes. ScreenshotNeo supports viewport and device options, full-page capture, waiting controls and image formats through its API, so the browser setup can run on a server or in a build pipeline.