ScreenshotNeo

BlogHow-to

How to Capture a Website at Google Pixel 8 Screen Size in Chrome

Use Chrome DevTools to capture a site at Pixel 8 screen size. Learn when to use a device preset, how to set custom dimensions, and how to save a viewport or full-page screenshot.

By the ScreenshotNeo team4 October 20266 min read

To capture a website at Google Pixel 8 screen size in desktop Chrome, open DevTools, turn on the device toolbar, select the Pixel 8 preset if it is available, and use Capture screenshot for the visible viewport or Capture a full size screenshot for the whole page. If the preset is missing, use a custom mobile size and record its width, height, and device pixel ratio (DPR) so the capture can be reproduced.

Google lists the Pixel 8 display as 1080 × 2400 physical pixels with a 20:9 aspect ratio. That specification does not define a universal CSS viewport or DPR for Chrome emulation. Don’t enter 1080 × 2400 as the CSS viewport just because it is the phone’s display resolution. Use the installed preset, or clearly describe custom dimensions as an approximation. Google’s Pixel 8 specifications and Chrome’s device mode guide explain the distinction and emulation controls.

Choose the screenshot you need

Need Chrome capture option What it includes
One screenful as it appears at the selected mobile size Capture screenshot The currently visible viewport
The whole page, including content below the fold Capture a full size screenshot The full page beyond the viewport

Device emulation is useful for checking responsive layouts and creating reproducible screenshots. It approximates a mobile device; it does not reproduce every behavior of a physical phone. If the result depends on real hardware or mobile browser behavior, verify it on an actual Pixel 8.

Capture with Chrome DevTools

  1. Open the website in desktop Chrome and navigate to the page you want to capture.
  2. Open DevTools: right-click the page and choose Inspect, or use Chrome’s keyboard shortcut for your operating system.
  3. Turn on the device toolbar using the phone-and-tablet icon in DevTools, or the Toggle device toolbar command.
  4. In the device toolbar’s Dimensions menu, select Pixel 8 if it appears. Allow the page to adjust to the emulated viewport. Reload if you need the page to initialize at that size.
  5. Open the DevTools More options menu and choose Capture screenshot for the visible area or Capture a full size screenshot for the entire page.
  6. Keep a note of the selected preset and capture scope. For a custom device, record width, height, and DPR as well.

Chrome’s device toolbar can simulate a mobile viewport and provides device presets as well as responsive dimensions. The available preset list may differ between Chrome installations. See the official Device mode instructions for the current controls.

If Pixel 8 is not listed: add a custom device

  1. In DevTools, open Settings and go to Devices.
  2. Add a custom device and enter the viewport width and height you intend to emulate.
  3. Set a DPR only if you know the value required for your test. DPR is the relationship between physical pixels and logical CSS pixels; it is not interchangeable with viewport width.
  4. Save the device, select it in the Dimensions menu, and capture the viewport or full page using the same menu options above.

There is no single custom CSS viewport and DPR established by the cited Pixel 8 display specification. If exact Pixel 8 behavior matters, use a Pixel 8 preset when available or validate on the physical phone. For an approximation, document your chosen dimensions and DPR rather than presenting them as Google’s universal Pixel 8 emulation settings.

Make the capture reproducible

When sharing a screenshot in a bug report, design review, or test record, include enough context for someone else to recreate it:

  • Page URL and the date or build being reviewed.
  • Whether it is a viewport-only or full-page capture.
  • The Pixel 8 preset name, if used; otherwise, the custom width, height, and DPR.
  • Any relevant page state, such as an open menu, consent prompt, or signed-in view.

Two screenshots can differ even at the same viewport if the page content or state changes. Capture after the page has settled and note any interaction needed to reach the displayed state.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL and can return an image or PDF; use the viewport option to request a phone-sized capture. The example below requests a WebP screenshot at a chosen viewport size. Consult the ScreenshotNeo API documentation for the current parameter names and options.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -d width=412 \
  -d height=915 \
  -d format=webp \
  -o pixel-size-shot.webp
import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "width": 412,
        "height": 915,
        "format": "webp",
    },
    timeout=90,
)
r.raise_for_status()
open("pixel-size-shot.webp", "wb").write(r.content)
const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  width: '412',
  height: '915',
  format: 'webp',
});
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('pixel-size-shot.webp', res);

The dimensions in these examples are an explicitly chosen mobile approximation, not a claim that they are the Pixel 8’s universal CSS viewport. Adjust them to match your test, and use Chrome or a physical Pixel 8 when you need the precise emulation or device behavior you are checking.

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify 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.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

Troubleshooting

The Pixel 8 preset is missing

Chrome installations can have different device lists. Add a custom device under DevTools Settings > Devices, choose and record the dimensions and DPR, or update your Chrome device definitions. Treat custom values as an approximation unless you have verified them against the target setup.

The screenshot looks too wide, narrow, or unusually scaled

Check that the device toolbar is enabled and the intended device or responsive dimensions are selected. Confirm that you did not enter the physical 1080 × 2400 display resolution as CSS viewport dimensions. Review DPR separately: it describes pixel scaling, while width and height set the emulated viewport.

The saved image cuts off content below the fold

You likely captured the current viewport. Use Capture a full size screenshot from the DevTools More options menu to include the full page.

The page layout did not change after selecting a device

Some pages initialize layout or content on load. Reload with the device toolbar active, wait for the page to settle, and check whether the responsive layout changes at the selected viewport. If the page depends on real mobile hardware or browser behavior, confirm it on a physical Pixel 8.

The capture differs from the physical phone

Device mode is an approximation. Differences can come from real hardware or browser software. Use emulation for responsive layout checks and a physical device when the behavior itself must be validated on Pixel 8.

Performance, reliability, and cost

For a one-off capture, DevTools avoids setting up a script or a screenshot service. Full-page captures contain more page area than viewport captures and may take longer on long pages. For repeatable work, use the same preset or documented dimensions, the same capture scope, and a stable page state.

Device mode is suitable for visual checks, but it cannot establish every real-device behavior. For critical mobile rendering, combine a reproducible emulated capture with a check on the physical phone. ScreenshotNeo is an API option when captures need to run from code or an MCP client; the request examples above use a chosen viewport approximation. Its free tier is 1,000 shots per month, and paid plans start at $5 for 3,000; see the documentation for configuration details.

FAQ

Is 1080 × 2400 the Pixel 8 viewport size in Chrome?

No. Google lists that as the display resolution. It does not by itself establish the CSS viewport or DPR used by Chrome emulation.

Does Chrome’s screenshot capture save a file?

Yes. The DevTools capture command creates a screenshot download in the browser.

Should I use a screenshot from DevTools or a real Pixel 8?

Use DevTools for convenient responsive layout checks. Use the physical phone when the result depends on actual device hardware or browser software.