How to Emulate an iPhone Screen in Chrome DevTools for Website Screenshots

To make a website look like it is on an iPhone-sized screen in desktop Chrome, open DevTools, turn on the device toolbar, choose a device preset or enter dimensions in Responsive mode, then use the device toolbar’s More options menu to capture a screenshot. Choose Capture screenshot for the visible viewport or Capture a full size screenshot for the entire page.

This is a useful way to review a responsive layout and save an image without a physical phone. It is an approximation of mobile browsing, not proof that the page behaves exactly like Safari on iOS.

Emulate an iPhone-like screen and capture it

Open the page in Chrome. Navigate to the URL you want to capture.
Open DevTools. Use Chrome’s menu or the keyboard shortcut for your operating system.
Turn on the device toolbar. Click Toggle device toolbar in the DevTools action bar. The page is displayed in a mobile-sized viewport.
Choose a device setup. Select a device from the Dimensions list, if the preset you need is available, or choose Responsive and enter a width and height. If a device preset is missing, check DevTools Settings for available devices.
Review the emulation settings. Check orientation and device type. If needed, enable the device pixel ratio (DPR) control and select a value. Custom device settings can include width, height, DPR, user agent string, and device type.
Capture the page. Open More options in the device toolbar and select Capture screenshot or Capture a full size screenshot.

Chrome’s menu labels and available device presets can vary by release and configuration. The workflow is documented in Chrome’s Device Mode guide and device settings documentation.

Choose the right screenshot type

What you need	DevTools command	What it captures
What is visible in the simulated screen	Capture screenshot	The current viewport only. Scroll to another position and capture again to save a different section.
The whole page, including content below the fold	Capture a full size screenshot	The full page beyond the current viewport.
A screenshot with a phone frame	Enable Show device frame, then capture in a supported device-specific mode	A device bezel around the emulated page, when frame artwork is available for that device.

For a design review, a viewport capture is often easier to compare across layouts. For an archive or page overview, a full-size capture includes content that would otherwise require scrolling. Use the frame option when the presentation needs a phone-like outline; the frame does not make the page’s rendering more accurate.

What the device settings change

Preset versus Responsive

A named preset applies a defined set of emulation settings for that device profile. Responsive mode lets you set the viewport dimensions directly, which is handy when you have a target layout size or want to check breakpoints. Do not assume a preset represents every hardware or software behavior of a particular iPhone model.

Viewport dimensions and orientation

The width and height determine the layout viewport that responsive CSS sees. Switching orientation changes their relationship. If the page’s layout changes unexpectedly, confirm that the dimensions and orientation are the ones intended before capturing.

Device pixel ratio

DPR affects the relationship between CSS pixels and device pixels and can affect the resulting screenshot’s pixel dimensions and the appearance of raster assets. Use the DPR control when the output needs to resemble a particular device profile. For a layout check, matching the CSS viewport is usually the first priority.

User agent and device type

Custom device configuration can include a user agent string and device type as well as dimensions and DPR. These settings can affect sites that adapt content based on device detection. They still do not turn desktop Chrome into iOS Safari.

Other Device Mode controls

Device Mode also offers controls such as network and CPU conditions and selected sensor inputs. They can help investigate how a page responds under constrained conditions, but they are not required for an ordinary screenshot. Change only the controls relevant to the behavior you are reviewing, and record the settings if screenshots need to be reproducible.

Make a screenshot that is useful for review

Set the viewport, orientation, and DPR before capture.
Let the page finish loading. If content appears as you scroll, scroll through the page first and allow lazy-loaded images or sections to load before taking a full-size capture.
Check the capture command: viewport for the current visible area, full size for content beyond it.
Keep the same settings between captures if you are comparing a design change.
For a bug report, include the page URL, viewport dimensions, orientation, and whether the image is a viewport or full-page capture.

Chrome’s Device Mode is intended for a first-pass simulation of a mobile viewport. It is useful for responsive layout work, but Chrome cautions that it does not actually run the page on mobile hardware. For browser-specific behavior, confirm on the real target device.

What DevTools emulation cannot confirm

A screenshot made in desktop Chrome does not establish that a site behaves the same in iOS Safari. Emulation does not reproduce every difference in browser API support, CSS support, or mobile browser behavior. Chrome describes Device Mode as a “first-order approximation” and recommends running the page on a mobile device when uncertain. See Chrome’s guidance on Device Mode and testing other browsers.

Use DevTools for responsive layout and visual checks. Use a real iPhone or remote debugging with real hardware when the question depends on iOS behavior, touch interaction, browser APIs, or Safari rendering.

Or skip the browser setup

For a screenshot returned directly by an API, ScreenshotNeo takes a URL and returns an image or PDF. See the ScreenshotNeo website and 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

Or use the same request in Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Or use Node.js:

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', new Uint8Array(await res.arrayBuffer()));

Replace the example URL and keep your API key private. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.

Troubleshooting

Problem	Likely cause	What to try
The device toolbar is missing	DevTools is open but device emulation is off, or the action is not visible in the toolbar.	Click Toggle device toolbar in the DevTools action bar. If necessary, use the DevTools command menu to find the toggle.
The device I want is not in the Dimensions list	The preset may not be enabled or available in the current configuration.	Check the device list in DevTools Settings, or choose Responsive and enter the dimensions you need.
The page looks different from the intended iPhone layout	Viewport size, orientation, DPR, device type, or user agent may differ from the intended setup.	Review those settings and capture again. Verify iOS-specific behavior on a real iPhone.
The screenshot cuts off content	The viewport capture only includes the visible area.	Choose Capture a full size screenshot to include content beyond the viewport.
The full-page screenshot has missing images or sections	Content may load lazily or only after scrolling, or page resources may still be loading.	Scroll through the page, wait for content to load, then capture again. If the problem persists, inspect the page’s loading behavior.
No device frame appears	A frame may not be available for the selected mode or device.	Use a supported device-specific mode and turn on Show device frame before capture. A frame is optional.
A screenshot differs from Safari on a physical phone	Desktop emulation does not reproduce every browser or hardware behavior.	Use Chrome’s real-device testing guidance and validate on the target iPhone.

Performance, reliability, and cost

The DevTools workflow uses Chrome already running on your machine, so it is a practical choice for occasional manual captures and visual debugging. Capture time depends on the page and its loaded content. Full-size captures include more page content than viewport captures and may take longer or produce larger files.

For repeatable comparisons, preserve the viewport, DPR, orientation, and page state. A local screenshot is only as current and complete as the page state at capture time; dynamic content, delayed loading, and lazy loading can change the result. This workflow has no per-screenshot API charge, though it requires a browser session and manual setup.

For automated captures, ScreenshotNeo offers API options including custom viewport and device presets, full-page capture with lazy images loaded, wait conditions, caching, and bulk capture. Its pricing is Free for 1,000 shots a 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. The response includes page-verdict and billing headers, and clean shots alone are billed. See the documentation for configuration details.

FAQ

Do I need an iPhone to take an iPhone-sized website screenshot?

No. Chrome Device Mode can emulate a mobile viewport on desktop. A physical device is useful when you need to verify actual iOS browser behavior.

Does a DevTools screenshot prove the page works on iPhone?

No. It is a visual approximation. Test on real iOS hardware when browser or device behavior matters.

Which command saves the whole page?

Choose Capture a full size screenshot from the device toolbar’s More options menu.

Can I use custom dimensions instead of an iPhone preset?

Yes. Choose Responsive and enter width and height, then set DPR or other available device options if the task requires them.