How to screenshot a responsive website at Google Pixel Fold size

To screenshot a responsive website at Google Pixel Fold size, use Chrome DevTools Device Mode, choose Responsive, and enter the CSS viewport dimensions for the screen state you want to represent. Capture the visible viewport or the full page from the Device Mode menu. Make separate captures for the cover screen and unfolded inner screen.

Google publishes the original Pixel Fold panel resolutions as 2092 × 1080 pixels for the cover display and 2208 × 1840 pixels for the inner display. Those are physical display specifications, not confirmed CSS viewport dimensions. Do not paste them into DevTools as CSS width and height without checking the target device’s viewport and device pixel ratio (DPR). Google’s Pixel comparison lists the panel resolutions; Chrome’s Device Mode guide explains viewport emulation and its limits.

1. Set up a Pixel Fold viewport in Chrome DevTools

Open the page in Chrome, then open DevTools: More tools → Developer tools from the browser menu, or use the keyboard shortcut for your operating system.
In DevTools, select Toggle device toolbar. The page appears in a simulated device viewport.
Open the device selector and choose Responsive. Enter the CSS viewport width and height for the Pixel Fold screen and software configuration you want to approximate.
Set portrait or landscape using the rotate control. Test both orientations if the page’s responsive breakpoints or layout behavior matter.
If you need a particular output pixel scale, open the device toolbar’s More options menu, enable Add device pixel ratio, and set the intended DPR. DPR is the relationship between physical screen pixels and CSS pixels; it is not the viewport size itself.
Reload the page after changing the emulation settings if layout, scripts, or responsive assets do not update as expected.

If your Chrome version provides a Pixel Fold profile, use it as a starting point, then inspect its dimensions and DPR. Chrome does not guarantee that every installed version includes that preset. You can also add a custom device profile when you have trustworthy configuration values.

2. Capture the cover and inner screens separately

The Pixel Fold has two distinct displays. A cover-screen capture represents the folded phone’s external display; an inner-screen capture represents the unfolded device. Their proportions differ, so a single screenshot cannot stand in for both responsive layouts.

For each screen state, enter its known CSS viewport dimensions, select the intended orientation, and capture it separately. If you do not know the exact CSS viewport and DPR for the device/browser combination, label the capture as an approximation and confirm important behavior on the physical phone.

3. Capture the viewport or the whole page

Open the Device Mode toolbar’s More options menu and choose:

Capture screenshot to save the currently visible viewport.
Capture full size screenshot to include page content beyond the visible viewport.

Use a viewport screenshot to inspect the initial fold, headers, navigation, and the content visible without scrolling. Use a full-size screenshot to review long-page layout and content below the fold. A full-page image can be much taller than the screen and is not a substitute for checking how the page behaves while scrolling.

4. Choose dimensions and DPR carefully

Google’s published figures are panel resolution: 2092 × 1080 for the original Pixel Fold cover display and 2208 × 1840 for its inner display. DevTools’ width and height fields represent CSS viewport dimensions. The research sources do not establish one universal CSS viewport or DPR for every Pixel Fold, Android version, browser configuration, or orientation.

Setting	What it controls	Practical guidance
CSS viewport width and height	The layout space websites use for media queries and responsive behavior.	Use values from the target device/browser or a suitable profile; do not assume panel pixels equal CSS pixels.
DPR	How CSS pixels map to physical display pixels and, in emulation, the pixel scale of rendered output.	Set deliberately when output scale matters. Leave the default when you only need a quick layout check.
Orientation	Whether the emulated viewport is portrait or landscape.	Capture each orientation needed; breakpoints and content wrapping can change.
Capture type	Visible viewport or full document image.	Choose based on whether you are documenting the screen or inspecting the entire page.

5. What to validate on the real phone

Chrome describes Device Mode as a first-order approximation: it simulates a viewport from desktop Chrome rather than running the page on the phone. Use a physical Pixel Fold when the result depends on device hardware or software behavior, or when exact viewport fidelity matters.

Check the cover and unfolded inner display as distinct layouts.
Check portrait and landscape if users can rotate the device.
Compare the page’s actual CSS viewport and DPR with the values used in DevTools when exact sizing matters.
Confirm behaviors that depend on the phone or mobile browser on the physical device.

6. Troubleshooting

Symptom	Likely cause	Fix
The screenshot is far larger than expected.	Physical panel resolution was entered as CSS dimensions, or the chosen DPR increased output pixels.	Use CSS viewport values for width and height. Review DPR separately and capture again.
The page looks like the wrong Pixel Fold screen.	The cover and inner displays have different proportions.	Configure and capture each screen state separately.
A breakpoint does not match the phone.	The emulated CSS viewport differs from the target configuration.	Check the actual device/browser viewport or use an accurate profile, then set those CSS dimensions in Responsive mode.
The image contains only the visible area.	The viewport capture command was selected.	Choose Capture full size screenshot for off-screen content.
The full-size screenshot is very tall or hard to inspect.	It includes content outside the visible screen.	Use a viewport capture for fold-level review; keep full-size capture for whole-page inspection.
The emulated result differs from the physical phone.	Device Mode does not execute the site on phone hardware and cannot reproduce every hardware or software condition.	Verify the relevant behavior on the actual Pixel Fold.
The dimensions or DPR controls are missing.	The relevant option may be hidden or a device profile is selected.	Switch to Responsive, open More options, and enable the DPR control if needed. Add a custom device profile if you have verified values.

7. Performance, reliability, and cost

For a one-off layout check, DevTools is a direct, built-in workflow and requires no screenshot API call. A full-page capture contains more pixels and may take longer to render or inspect than a viewport capture, especially for long pages. Reload after changing emulation when the page has cached or script-driven responsive behavior.

Device Mode is useful for repeatable visual checks, but its reliability is bounded by the viewport and DPR values you supply and by the differences between desktop emulation and a real phone. Treat the original Pixel Fold resolution figures as panel specifications, not ready-to-use CSS viewport settings. Confirm production-critical results on the device.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Send one GET request for a URL to receive a PNG, JPEG, WebP, or PDF. Its viewport settings let you request a responsive capture; use the appropriate CSS width and height for the Pixel Fold state you intend to represent. The API cannot make a desktop capture equivalent to physical-device testing.

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

Replace the example URL with the page you want to capture and add the viewport dimensions from the docs. Before capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each 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 Claude, Cursor, and other MCP clients use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Every feature is available on every plan.

Frequently asked questions

Does Chrome have a Pixel Fold preset?

It may be available in a particular Chrome version, but the Chrome documentation does not guarantee a Pixel Fold preset in every version. Use Responsive mode or a custom profile with verified settings.

Can I use the published panel resolution as the viewport?

Not without confirming the CSS viewport and DPR. The 2092 × 1080 and 2208 × 1840 figures describe panel resolutions, not established CSS viewport values.

Is a DevTools screenshot proof that the page works on a Pixel Fold?

No. It is an emulation from desktop Chrome. Use the phone for checks that depend on actual device or browser behavior.