How to Capture a Website Screenshot at 412 Pixel Mobile Width

To capture a website at 412-pixel mobile width, set the browser viewport to 412 CSS pixels, choose a viewport height, and capture either the visible viewport or the full page. For an output file that is exactly 412 raster pixels wide, use CSS-pixel screenshot scaling. Device-pixel scaling can produce a wider image when the device scale factor is greater than 1.

A 412-pixel viewport is a responsive layout setting, not a complete phone specification. Height, device scale factor, mobile emulation settings, browser, and operating system can all affect the result.

1. Capture at 412px in Chrome DevTools

Open the target page in Chrome, then open DevTools.
Turn on the device toolbar and select Responsive.
Enter 412 for the viewport width and set the height for the view you want to inspect. Choose a height that represents the fold or test case you need to document.
Check that the page has reflowed at that width. Note consent banners, popups, chat widgets, or animations that may affect the capture.
Open the device toolbar menu and select Capture screenshot for the visible viewport, or Capture full size screenshot for the full page.

Chrome’s device mode lets you enter exact viewport dimensions, simulate mobile-oriented behavior, adjust device pixel ratio, and choose between viewport and full-size captures. See Chrome’s device mode documentation.

2. Automate the capture with Playwright

Use Playwright when you need repeatable screenshots in a script or a test workflow. This runnable Node.js example creates a Chromium browser context, sets a 412-by-915 CSS-pixel viewport, loads a page, and saves a viewport screenshot at CSS scale.

import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com';
const browser = await chromium.launch();
const context = await browser.newContext({
  viewport: { width: 412, height: 915 },
  deviceScaleFactor: 1,
});
const page = await context.newPage();

try {
  await page.goto(url, { waitUntil: 'load', timeout: 30_000 });
  await page.screenshot({
    path: 'mobile-412.png',
    fullPage: false,
    scale: 'css',
  });
} finally {
  await browser.close();
}

Save it as capture.mjs, install Playwright with npm install playwright, install its browser with npx playwright install chromium, and run node capture.mjs https://example.com. The saved image is 412 pixels wide because the context is 412 CSS pixels wide and the screenshot uses CSS scale.

To capture the full scrollable page, change fullPage: false to fullPage: true. Playwright documents screenshot extent and scale in its Page API.

3. Choose the screenshot dimensions and behavior

Decision	Use this when	What to know
412 CSS-pixel width	You want to inspect or document a responsive layout at that width.	This sets the browser layout viewport. It does not identify a specific phone.
Viewport capture	You need the visible fold or a compact bug report.	The screenshot height follows the viewport height you set.
Full-page capture	You need content below the fold in one image.	Long pages, sticky elements, and lazy-loaded content can affect how the page appears.
CSS screenshot scale	The output file must be 412 pixels wide.	Playwright maps one output image pixel to one CSS pixel.
Device screenshot scale	You want output at the emulated device’s pixel density.	The raster image can be wider than 412 pixels when the device scale factor exceeds 1.
Device emulation profile	You also need a profile’s mobile behavior and other device settings.	A named profile combines properties such as viewport and scale; it is more than a width shortcut.

Playwright’s scale option accepts css or device. The viewport dimensions, mobile emulation, and device scale factor are distinct settings in the Chrome DevTools Protocol Page domain. For Playwright device profiles, consult its device descriptor source.

4. Make captures repeatable

Set both width and height. Width controls responsive reflow; height determines the visible area in a viewport capture.
Choose the capture extent explicitly. Use viewport mode for a particular fold and full-page mode for below-the-fold content.
Control scale. Use CSS scale when the required artifact is exactly 412 raster pixels wide. Use device scale when higher-density output is part of the requirement.
Wait for the page state you need. A page can still be changing after navigation. If a key element appears asynchronously, wait for it before capturing; account for animations and delayed content in repeatable workflows.
Keep the emulation settings with the result. Record the viewport height, browser and emulation profile when comparing screenshots over time.
Validate device-specific bugs on hardware. Emulation is useful for responsive layout checks, but does not guarantee identical rendering on every handset, browser version, operating system, or network.

5. Troubleshooting

Symptom	Likely cause	Fix
The saved image is wider than 412 pixels.	The screenshot uses device-pixel scaling and the emulated device scale factor is above 1.	Set Playwright `scale: 'css'` for one raster pixel per CSS pixel. In DevTools, review the device pixel ratio setting.
The page still looks like desktop.	The viewport may not have been set to 412, or the page’s responsive rules do not change at that width.	Confirm the responsive width field or Playwright context viewport, then inspect the page at 412 CSS pixels. A width setting cannot create responsive rules the site does not have.
The screenshot cuts off content below the fold.	You captured only the viewport.	Use Chrome’s full-size screenshot option or Playwright’s `fullPage: true`.
The full-page image misses images or sections.	Content may load lazily as it approaches the viewport, or after a delay.	Wait for the relevant content to load before capture. For automation, scroll through the page or wait for a known element, then take the screenshot.
The output changes between runs.	Dynamic content, animations, network timing, consent UI, or a different browser/emulation setup may change the page state.	Keep viewport, scale, browser, and wait conditions fixed. Disable or wait out animations where the capture workflow permits, and document overlays that are part of the test.
Playwright cannot launch Chromium.	The Playwright package may be installed without its browser binary.	Run `npx playwright install chromium` for the project’s Playwright installation.
Navigation times out.	The page is slow, blocked, or waiting for a condition that never occurs.	Check that the URL is reachable and choose an appropriate navigation readiness condition and timeout. Wait for the specific content needed rather than assuming every page reaches an idle network state.

6. Performance, reliability, and cost

For a single manual check, Chrome DevTools avoids writing automation code. Playwright is useful when the same dimensions and capture steps must be repeated. Full-page captures can take more work on long pages, especially when content loads as it is scrolled into view. No universal capture time follows from a 412-pixel width; page complexity, network conditions, and browser setup matter.

For reliable comparisons, keep the viewport height, screenshot scale, browser version, device settings, and page readiness condition consistent. A 412 CSS-pixel emulation is a reproducible layout check, not proof of identical behavior on physical devices. Physical-device validation is useful when the issue depends on hardware, browser, operating system, or real network behavior.

Chrome DevTools and Playwright are software workflows and do not require buying a device. A physical handset is optional for final validation. No performance benchmark is implied here.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single request can return an image or PDF. Set the viewport width to 412 and choose a height; see the ScreenshotNeo documentation for API options and current parameter names.

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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Configure the 412-pixel viewport and height using the API’s viewport options. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

FAQ

Does 412px mean a particular phone?

No. It is a viewport width in CSS pixels. A phone profile also includes other emulation properties.

Will every phone show the same result?

No. Browser, operating system, device characteristics, and network can affect rendering. Confirm hardware-specific issues on the device involved.

Should I use 412 width for a full-page screenshot?

Yes, if the layout needs to be evaluated at that width. Full-page mode changes the capture extent, not the configured viewport width.

Why can a 412 CSS-pixel viewport produce an image wider than 412 pixels?

Device-pixel scaling can map each CSS pixel to multiple raster pixels. Use CSS scale when the file itself must be 412 pixels wide.