How to Capture a Responsive Web Page Screenshot at Google Pixel 9 Size
Use Chrome DevTools to capture a page at a Pixel 9 style mobile viewport, then verify device-specific behavior on a real phone.
To capture a responsive web page at Google Pixel 9 size, use Chrome DevTools Device Mode to set a mobile CSS viewport, choose a device pixel ratio (DPR), and capture either the visible viewport or the full page. A Pixel 9’s panel is 1080 × 2424 physical pixels, but that is not automatically the browser’s CSS viewport. For a final check of behavior that depends on the actual phone, inspect the page on a physical Pixel 9.
What “Pixel 9 size” means for a web screenshot
Google lists the Pixel 9 display as a 6.3-inch Actua OLED panel with a 1080 × 2424 resolution and 422 PPI. Those are hardware display specifications, not a universal browser viewport size. Web layouts respond to CSS pixels, while DPR describes how physical pixels map to CSS pixels. Browser UI, orientation, and device configuration can also affect the usable viewport. See Google’s Pixel 9 specifications and Chrome’s explanation of Device Mode and DPR.
There is no single guaranteed Pixel 9 CSS viewport value established by those specifications. If Chrome offers a Pixel 9 preset, use it and record its dimensions. Otherwise, enter the CSS width, height, and DPR you want to test in Responsive mode. Do not enter 1080 × 2424 as CSS dimensions just because those are the panel’s physical pixels.
Capture a Pixel 9 style screenshot with Chrome DevTools
- Open the page in Chrome and open DevTools. You can use the browser menu or the keyboard shortcut for your operating system.
- Toggle the device toolbar to turn on Device Mode.
- Choose a Pixel 9 preset if one is available in your installed Chrome version. If not, select Responsive and enter the target CSS width and height. Set DPR if you need to check high-density images, canvas output, or styles that depend on resolution.
- Set the intended orientation and reload the page. Check the page state you want to capture, including any menus, consent state, or dynamically loaded content.
- In the Device Mode toolbar, open More options and choose Capture screenshot for the visible viewport, or Capture full size screenshot for the full document.
- Open the saved image and confirm its dimensions and contents. A full-size capture includes content below the fold and is taller than a phone screen.
Chrome describes Device Mode as a first-order approximation because the page still runs on the desktop computer. Use a physical Pixel 9 when browser behavior, touch interaction, performance, or device-specific rendering needs to be validated. See Chrome’s Device Mode guidance.
Choose viewport capture or full-page capture
| Capture | Use it for | What it represents |
|---|---|---|
| Viewport screenshot | Reviewing the initial mobile screen, a responsive breakpoint, or a page state visible without scrolling | The emulated viewport at the selected CSS dimensions and DPR |
| Full-size screenshot | Reviewing page content below the fold, long landing pages, or an entire document at mobile width | A tall image of the full page; it is not one screenful as seen on the handset |
When sharing a screenshot for review, note the viewport dimensions, DPR, orientation, and capture type. This makes it clear whether the image represents one screen or the full page.
Set dimensions and DPR for the test you need
Use the dimensions of an installed Pixel 9 preset when your goal is to approximate that browser configuration. If you are testing a specific responsive breakpoint, enter the CSS viewport around that breakpoint instead. DPR affects the relationship between CSS and physical pixels and may affect resolution-dependent assets or code, but it does not turn the physical panel resolution into a CSS viewport.
- Width and height: enter CSS pixels in Responsive mode; switch them for landscape testing.
- DPR: use the preset value when available or set the value relevant to your test. A DPR-sensitive page can choose different assets or rendering behavior.
- Orientation: test portrait and landscape separately; layout changes can cross breakpoints.
- Browser state: be consistent about whether the page is freshly loaded, scrolled, signed in, or showing a banner. Device Mode does not promise to reproduce every phone browser UI state.
The exact preset names and toolbar labels can change between Chrome releases. If a named preset is absent, Responsive mode still lets you set the viewport dimensions directly.
When to use a real Pixel 9
Desktop emulation is useful for responsive layout checks and repeatable captures. It does not make the desktop computer behave exactly like the phone: input, browser internals, device performance, and some rendering details can differ. For a production-device match, load the page on a Pixel 9 and verify the browser viewport and page behavior there. Chrome’s guidance recommends running the page on a mobile device when in doubt: Device Mode documentation.
Common problems and fixes
| Problem | Likely cause | Fix |
|---|---|---|
| The screenshot is much larger than expected | You chose full-size capture, which includes content below the fold. | Use Capture screenshot for the visible viewport, or keep the full-page image and describe it as such. |
| The layout does not match the phone | The selected CSS viewport or DPR differs from the phone, or desktop emulation differs from real hardware. | Check the preset’s dimensions and DPR, then verify the page on a physical Pixel 9 if the match matters. |
| Images look soft or differ from the phone | The page may select assets based on DPR, or the capture settings may differ. | Set the intended DPR, reload, and inspect the result at its actual pixel dimensions. |
| The page is in landscape when portrait was intended | Device Mode is using the other orientation or dimensions were entered in the wrong order. | Switch orientation or enter portrait width and height, then reload and capture again. |
| A banner or popup obscures the page | The page state includes a consent prompt or other overlay. | Handle the prompt as a visitor would, or capture the state you intend to document. For repeatable test state, use the same browser storage and page setup. |
| The screenshot command is missing | Chrome’s toolbar menu or labels may differ by version, or Device Mode may be off. | Enable the device toolbar and check More options for the viewport or full-size capture command. |
Performance, repeatability, and file size
A viewport capture is generally smaller and quicker to inspect than a full-page capture. Full-page images can become very tall, take longer to render or share, and produce larger files. Keep the page state and capture settings consistent when comparing changes. For pages with lazy-loaded content, scroll through the page before a manual full-page capture if sections have not appeared yet, then confirm that the captured image contains them.
For reliable visual review, record the URL, capture date, viewport width and height, DPR, orientation, and whether the screenshot is viewport-only or full-page. Treat desktop emulation as a layout approximation and reserve a real-device check for issues where hardware or mobile browser behavior could change the result.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its API can capture a page at a chosen viewport, returning an image or PDF; check the API documentation for the current parameters. Set the viewport to the CSS dimensions you want to inspect, rather than assuming the Pixel 9 panel resolution is its browser viewport.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);With the appropriate viewport parameters, these calls can capture a mobile layout. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, and failed loads are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Should I type 1080 × 2424 into the CSS viewport fields?
No. Those are the Pixel 9 panel’s physical pixel dimensions. Use a device preset or the CSS dimensions you want to test.
Does a full-page screenshot show one phone screen?
No. It captures the full document at the emulated mobile width, so the resulting image is taller than the handset viewport.
Can Chrome DevTools prove the page works on a Pixel 9?
No. It approximates mobile conditions on a desktop. Test on the physical phone when device-specific behavior is important.
Will the exact Pixel 9 preset always appear in Chrome?
Preset availability can vary by Chrome version. Responsive mode lets you enter dimensions when the named preset is unavailable.
