How to Screenshot a Responsive Website at a Foldable Phone’s Inner Screen Size

To screenshot a responsive website at a foldable phone’s inner-screen size, set Chrome DevTools’ device toolbar to a custom CSS viewport matching the browser layout area, then choose Capture screenshot for the visible viewport. For a measured Samsung Galaxy Z Fold7 unfolded in portrait, use 749 × 654 CSS pixels with expanded browser UI or 749 × 750 CSS pixels with collapsed browser UI. These are measurements for a specific Android 16 and Chrome 134 configuration, not universal foldable settings. [Effective Viewport: Z Fold7 unfolded]

Use Capture a full size screenshot only when you want the entire document. That image extends beyond the visible screen and is not a screen-sized viewport capture.

1. Set the inner-screen viewport in Chrome DevTools

Open the page in Chrome and open DevTools with Inspect from the context menu or your browser’s DevTools shortcut.
Click Toggle device toolbar.
In the device selector, choose Responsive.
Enter the target inner-display browser viewport width and height in CSS pixels. For the cited Z Fold7 unfolded portrait measurement, start with 749 × 654 when browser UI is expanded, or 749 × 750 when it is collapsed.
Open the device toolbar’s More options menu and choose Capture screenshot for the visible area. Choose Capture a full size screenshot for the whole document.

These viewport dimensions describe the page’s CSS layout area. They do not promise a particular physical image size. Chrome’s Device Mode is an approximation of a mobile experience, not a phone running in the browser. [Chrome DevTools: Device Mode]

2. Choose the right viewport dimensions

Use the browser viewport, not the display specification

A foldable’s display dimensions and the browser’s CSS viewport are different measurements. The cited Z Fold7 reference lists 750 × 832 CSS-pixel device dimensions, but its measured unfolded portrait browser viewport is 749 pixels wide and either 654 or 750 pixels tall, depending on the browser UI state. Its folded portrait viewport is measured at 411 × 814 or 411 × 870 CSS pixels. These values describe the stated device and browser configuration only. [Unfolded measurement] [Folded measurement]

Target context	Measured CSS viewport	Use it for
Z Fold7 unfolded, portrait, expanded browser UI	749 × 654	Visible layout area with browser controls expanded
Z Fold7 unfolded, portrait, collapsed browser UI	749 × 750	Visible layout area with browser controls collapsed
Z Fold7 folded, portrait, expanded browser UI	411 × 814	Cover-screen comparison
Z Fold7 folded, portrait, collapsed browser UI	411 × 870	Cover-screen comparison

Effective Viewport reports these measurements for Android 16 and Chrome 134.0.6998.135. Check the device and browser you need to support; do not treat these values as a preset for every foldable, orientation, browser release, or display setting.

Set device pixel ratio only when needed

Chrome defines device pixel ratio (DPR) as the ratio between physical screen pixels and logical CSS pixels. The cited Z Fold7 measurement reports DPR 2.625. To expose the DPR control, open the device toolbar’s More options menu, choose Add device pixel ratio, then select the desired value. [Chrome DevTools: Device Mode]

Set DPR when you are checking density-sensitive assets or need to approximate a device’s pixel density. For ordinary responsive layout checks, matching the CSS viewport is the key step. DevTools’ screenshot output may not map exactly to viewport dimensions multiplied by DPR, so inspect the saved image’s actual pixel dimensions instead of assuming them.

3. Test responsive breakpoints and orientation

Enable Show media queries from the device toolbar’s More options menu to see breakpoint ranges, then test the target width and nearby widths on both sides of any relevant breakpoint. Test portrait and landscape as separate setups. A layout that fits the inner screen in portrait may take a different breakpoint or arrangement in landscape.

If the design adapts to a fold posture, hinge, or multiple display segments, use DevTools’ foldable posture and display-feature emulation controls where supported. Chrome documents continuous and folded posture controls, and the DevTools Protocol Emulation domain includes device-posture and display-feature concepts. Availability depends on the Chrome and DevTools version. [Device Mode] [DevTools Protocol: Emulation]

4. Capture the viewport or the full page

Capture screenshot: captures the current visible viewport at your selected dimensions.
Capture a full size screenshot: captures the full document, producing an image taller than the viewport when the page scrolls.

For a screen-sized review or design comparison, use the first option. For a whole-page visual record, use the second. Be clear about which one you share, since a full-page image does not represent what fits on the phone’s screen at once. [Chrome DevTools: Device Mode]

5. What desktop emulation can verify

A custom responsive viewport is useful for checking CSS layout, content wrapping, breakpoint behavior, and whether key elements fit within the chosen screen area. It does not establish how a physical foldable handles touch, browser chrome, hinge behavior, performance, or hardware-specific behavior.

Chrome describes Device Mode as a “first-order approximation” of the mobile experience. When the result depends on actual device behavior, open the page on a foldable and use remote debugging to inspect the live page. [Chrome DevTools: Device Mode]

6. Automate the same viewport with a browser script

For repeated captures in a development workflow, a browser automation tool can set a viewport and save a screenshot. The following runnable Playwright example uses the measured unfolded Z Fold7 expanded-UI viewport. It captures only the visible viewport; remove or change the dimensions to match your target configuration.

npm install --save-dev playwright
npx playwright install chromium

// save as capture-foldable.mjs
import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
  viewport: { width: 749, height: 654 },
  deviceScaleFactor: 2.625,
  isMobile: true,
  hasTouch: true,
});

await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'foldable-inner.png' });
await browser.close();

node capture-foldable.mjs

Replace https://example.com with the page you control or are authorized to capture. If the page keeps background requests open, networkidle may not occur; use a suitable load condition or wait for a specific selector instead. Playwright’s viewport and device scale settings configure browser emulation; they do not reproduce a real foldable hinge or browser UI state.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. Its API accepts a URL and returns an image or PDF. The custom viewport parameters let you request the measured inner-screen CSS dimensions directly. See the ScreenshotNeo API documentation for the options and parameter names.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -d width=749 \
  -d height=654 \
  -o foldable-inner.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://example.com",
        "width": 749,
        "height": 654,
    },
    timeout=90,
)
r.raise_for_status()
open("foldable-inner.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
  width: '749',
  height: '654',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`ScreenshotNeo request failed: ${res.status}`);
await Bun.write('foldable-inner.webp', new Uint8Array(await res.arrayBuffer()));

These examples use 749 × 654 for the expanded-browser-UI measurement. Change height to 750 for the cited collapsed-UI measurement. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

8. Troubleshooting

Problem	Likely cause	Fix
The page does not match the foldable’s layout	You entered physical display dimensions or a different browser viewport measurement.	Use CSS viewport dimensions for the browser state you want to model. Treat 749 × 654 and 749 × 750 as the cited Z Fold7 unfolded examples only.
The screenshot image dimensions differ from the viewport	CSS pixels and output image pixels are different concepts; DPR and capture behavior can affect output.	Inspect the saved image dimensions. Set DPR when density matters, and verify the resulting file rather than calculating its size from viewport alone.
The capture includes the whole page when you wanted one screen	You selected full-size capture.	Choose Capture screenshot for the visible viewport.
A fold or hinge layout is missing	A plain responsive viewport does not necessarily emulate posture or display segments.	Enable the relevant foldable emulation controls if your DevTools version supports them, then verify on physical hardware when hinge behavior matters.
A Playwright script waits indefinitely	The site may keep network activity running, so the network-idle condition is never reached.	Use a different navigation wait condition and wait for a page-specific selector or bounded delay.
Layout differs from the physical phone despite matching dimensions	Desktop emulation cannot reproduce every mobile browser and hardware characteristic.	Use remote debugging on the actual foldable for behavior that depends on the device.

9. Performance, repeatability, and cost

For one-off inspection, DevTools avoids setting up a capture service or script. For repeatable checks, keep the viewport, DPR, orientation, browser version, and browser UI assumptions consistent, and save those settings with the capture notes. Dynamic content, delayed images, consent state, and network-dependent page behavior can still make captures differ between runs.

Device Mode does not require a paid screenshot API. A script adds browser installation and execution to your workflow. If you use ScreenshotNeo, the published plans are Free (1,000 shots/month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free. Every feature is on every plan.

FAQ

What dimensions should I use for a foldable inner screen?

Use the browser’s CSS viewport for your target device and browser state. The cited Z Fold7 unfolded portrait example is 749 × 654 or 749 × 750 CSS pixels depending on browser UI state.

Should I use the manufacturer’s display resolution?

Not by itself. The browser layout viewport can differ from the display dimensions, so match the CSS viewport you intend to reproduce.

Does a full-page screenshot represent the phone screen?

No. It captures content beyond the visible viewport. Use the visible screenshot option for a screen-sized image.

Can DevTools prove the site works on a foldable?

No. It helps inspect an emulated layout. Use a physical foldable for hardware, hinge, touch, and real-browser validation.