How to Use Chrome DevTools to Screenshot a Website at iPhone 15 Size
Capture a website at iPhone 15 size in Chrome DevTools: set a 393 × 852 CSS viewport, choose Mobile and DPR 3, then save the visible view or full page.
To screenshot a website at iPhone 15 size in Chrome DevTools, open the device toolbar, set the Responsive viewport to 393 × 852 CSS pixels, choose the Mobile device type, and set DPR to 3 when that control is available. Use More options > Capture screenshot for the visible viewport, or Capture a full size screenshot for the whole page.
Apple lists iPhone 15 at 393 × 852 points, corresponding to 1179 × 2556 device pixels at 3×. In DevTools, enter the CSS-sized viewport, not the native pixel dimensions. Apple’s layout guidance provides the reference dimensions; Chrome’s Device Mode guide explains the emulation and capture controls.
Set the iPhone 15 viewport
- Open the website in Chrome, then open DevTools with ⋮ > More tools > Developer tools or the keyboard shortcut for your operating system.
- In DevTools, click Toggle device toolbar (the phone-and-tablet icon). The page will switch to a device emulation view.
- In the device toolbar, choose Responsive and enter 393 for width and 852 for height. These are CSS viewport dimensions.
- Choose Mobile for the device type. If the type selector is hidden, open More options and enable Add device type.
- Set DPR to 3 if the control is shown. If it is hidden, look in More options for the DPR control.
- Reload the page if you need to observe its initial responsive state. Wait for images, fonts, and other visible content to finish loading.
Width, height, and DPR control different things. The 393 × 852 values define the emulated CSS viewport. DPR 3 maps each CSS pixel to three device pixels, so a viewport-sized image can be 1179 × 2556 pixels. Browser scaling and the selected capture type can affect the file dimensions.
Choose a screenshot capture mode
| DevTools command | What it captures | Use it when |
|---|---|---|
| Capture screenshot | The currently visible emulated viewport. | You need a screenshot of the page as it appears on screen at that scroll position. |
| Capture a full size screenshot | The full page, including content below the viewport. | You need a long-page reference or want to inspect off-screen layout. |
To capture, open the DevTools More options menu and select the appropriate screenshot command. Chrome saves the image as a download. For a visible-viewport capture, scroll to the section you want first. A full-size capture is useful for documentation, but it is not the same as a single iPhone screen.
Check the result
- Confirm the device toolbar still shows 393 × 852 and the intended device type before capture.
- Inspect the saved image dimensions if pixel size matters. The CSS viewport alone does not guarantee a particular output file size.
- For a full-page image, check sticky headers, fixed elements, lazy-loaded images, and content that appears only after scrolling. These can behave differently in a full-page capture.
- Use the visible viewport option when the exact on-screen composition matters; use full size when page coverage matters.
What DevTools emulation can and cannot tell you
Device Mode approximates a mobile browser view from a desktop. It simulates viewport dimensions, device type, and pixel density, but does not run the page on an actual iPhone or reproduce every hardware, browser, network, or touch behavior. Chrome describes Device Mode as a “first-order approximation” and recommends using a real device when uncertain. Use emulation for responsive layout checks, then verify important behavior on an actual iPhone.
Also distinguish a website screenshot from a native iPhone screen capture: DevTools captures the rendered webpage in an emulated browser viewport, not the iPhone interface, status bar, or a real device screen.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| The screenshot is the wrong size. | The toolbar dimensions are CSS pixels, while the desired file dimensions may be device pixels; DPR or browser zoom may also differ. | Set 393 × 852 in the viewport fields, set DPR to 3 if available, and inspect the downloaded image’s pixel dimensions. |
| The page looks like desktop layout in a narrow frame. | The page may not have responsive styles, or the device type is not set to Mobile. | Choose Mobile, reload, and check the page’s viewport meta tag and responsive CSS. Emulation cannot create responsive behavior the site does not implement. |
| The DPR control is missing. | The control is hidden in the device toolbar configuration. | Open More options and enable the DPR control. If the current Chrome interface differs, consult the current Device Mode documentation. |
| Images or sections are missing. | They may load lazily, require scrolling, depend on a network response, or appear only after interaction. | Wait for loading, scroll through the page before a full-size capture, and trigger any required interaction before capturing. |
| Sticky or fixed elements appear oddly in the full-page image. | Full-page capture extends beyond one viewport and may not represent how fixed elements appear during normal scrolling. | Use a viewport capture for an exact screen view, or verify the full-page output against the page’s intended behavior. |
| The result differs from a real iPhone. | Desktop device emulation is an approximation and does not reproduce all iPhone hardware and browser behavior. | Check the page on an actual iPhone for final validation. |
Or skip the browser setup
ScreenshotNeo can return a website screenshot through one API request. Its screenshot API supports PNG, JPEG, and WebP output, and accepts the parameter names used by other screenshot APIs. See the ScreenshotNeo API documentation for the available options, including viewport and device settings.
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);These examples capture the target URL; configure viewport and device options as described in the docs when you need an iPhone-sized viewport. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Its MCP server lets AI agents use screenshot tools, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.
Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
FAQ
Should I enter 1179 × 2556 in DevTools?
No. Enter 393 × 852 as the CSS viewport and use DPR 3 to represent the iPhone 15 pixel ratio.
Which capture option should I use for a design review?
Use Capture screenshot for one screen at a specific scroll position. Choose Capture a full size screenshot when the review needs the entire page.
Does this prove the site works correctly on an iPhone 15?
No. It is a useful responsive layout approximation. Verify behavior that depends on real hardware or iOS Safari on an actual iPhone.
