How to Emulate an iPhone 15 Viewport in Chrome DevTools

To emulate an iPhone 15 in Chrome DevTools, open Device Mode, select an iPhone 15 preset if available, or create a custom mobile device profile with a 393 × 852 CSS-pixel viewport and 3.0 device pixel ratio (DPR). Those dimensions are a commonly used emulation reference from YesViz, not values Apple publishes as a browser viewport specification. Chrome’s Device Mode is a desktop simulation, so use an actual iPhone and iOS browser when you need to verify platform-specific behavior.

Set up the iPhone 15 viewport

Open the page you want to inspect in Chrome.
Open DevTools with F12 or Ctrl+Shift+I on Windows/Linux, or ⌘+Option+I on macOS.
Click Toggle device toolbar in the DevTools action bar. This opens Device Mode.
Open the device toolbar’s Dimensions menu. Choose an iPhone 15 preset if your Chrome build provides one.
If there is no suitable preset, create a custom device profile using the steps below.

Chrome changes its DevTools interface over time. If a control is in a different place, open the DevTools Command Menu with Ctrl+Shift+P or ⌘+Shift+P and search for a device-related command, or open DevTools Settings and use the Devices page.

Create a custom iPhone 15 profile

In Device Mode, open the device list and select Edit. You can also open DevTools Settings > Devices.
Select Add custom device.
Enter a name such as iPhone 15 reference.
Set Width to 393 and Height to 852.
Set Device pixel ratio to 3.
Set Device type to Mobile.
Save the profile, then select it from the Dimensions menu.

Chrome’s custom device profiles also allow optional user-agent settings. Leave that field at its default unless you have a specific reason to test a different user agent; changing it does not turn desktop Chrome into iOS Safari.

Use CSS pixels, not the iPhone’s physical resolution

Apple lists the iPhone 15 display as 2556 × 1179 physical pixels at 460 ppi. Those are hardware display specifications, not the width and height to enter as a CSS viewport in Device Mode. The 393 × 852 CSS-pixel profile at DPR 3.0 is a third-party emulation reference. Chrome defines DPR as the relationship between physical device pixels and logical CSS pixels.

Check portrait, landscape, and responsive breakpoints

Portrait: start with 393 × 852 CSS pixels.
Landscape: use the rotate control in Device Mode, then inspect the page at the resulting width and height.
Breakpoints: show the media query breakpoint indicators, then drag the viewport edge or edit its width around each breakpoint. Confirm the layout on both sides of the threshold.
High-density images: keep DPR at 3 for the reference profile, and check whether srcset or CSS image selection serves the intended asset.
Touch-oriented behavior: use the Mobile device type when you want Chrome to emulate a mobile device type. A mouse click in DevTools is still not proof that real touch interactions work correctly.

Device Mode also offers network and CPU throttling and sensor overrides such as geolocation and orientation. Use throttling to inspect loading and rendering under constrained conditions, and sensor overrides when the page depends on those inputs. These controls improve a simulation; they do not reproduce the exact network, CPU, sensors, or browser behavior of a specific phone.

What Chrome DevTools does and does not emulate

Chrome describes Device Mode as a “first-order approximation” of how a page looks and performs on mobile. The page still runs on your desktop computer with simulated mobile characteristics. Device Mode can help inspect viewport layout, device type, DPR, throttled network and CPU, and selected sensor values.

It does not establish that a page works correctly in iOS Safari. Desktop and mobile devices have different CPU architectures, and emulation does not reproduce every browser API, CSS support difference, touch behavior, or hardware-specific issue. For a release decision involving iOS behavior, check on the target device and browser. Chrome’s guidance is to run the page on a mobile device when in doubt.

Question	DevTools emulation helps with	When to use a real iPhone
Does the responsive layout fit?	Viewport dimensions, orientation, and media query inspection	When a visual issue appears device-specific
Are high-resolution assets selected?	DPR-based rendering and image selection checks	When actual image sharpness or memory behavior matters
Does mobile interaction work?	Some mobile device behavior and touch-oriented layout checks	For actual touch gestures, keyboard behavior, and interaction bugs
Will performance be acceptable?	Approximate network and CPU throttling	For hardware and real network performance conclusions
Does it work in iOS Safari?	Not conclusively	Yes: test in the target browser on iOS

Or skip the browser setup

If you need a screenshot of the page rather than an interactive DevTools session, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. A request can return a PNG, JPEG, WebP, or PDF. Its viewport and device options can capture mobile-sized layouts, but an API screenshot is still not a substitute for verifying real iOS Safari behavior.

For the available options and parameter reference, see the ScreenshotNeo documentation.

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}`);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Troubleshooting

Symptom	Likely cause	Fix
No iPhone 15 choice in Dimensions	The installed Chrome build does not include that preset.	Add a custom profile with 393 × 852 CSS pixels, DPR 3, and Mobile type.
The page looks too large or too small	Physical display pixels were entered as CSS dimensions, or DPR is wrong.	Use CSS viewport dimensions and set DPR separately. For this reference profile, use 393 × 852 and DPR 3.
The page layout changes but the phone screenshot does not match	Desktop emulation and iOS browser rendering differ.	Check the actual iPhone and target browser, especially for CSS support, browser APIs, and touch behavior.
Images appear soft	The page may not be selecting a high-DPR asset.	Inspect image requests and verify the `srcset` or CSS resolution variants include a suitable asset.
The profile was not saved	The device was configured in the toolbar but not added through device settings.	Use the device list’s Edit option or DevTools Settings > Devices, add the custom device, and save it.
Responsive controls are hard to find	DevTools layout or labels differ by Chrome version.	Use the Command Menu to find device-related commands, or open Settings > Devices.

Performance, reliability, and cost

DevTools emulation is built into Chrome, so configuring a viewport does not require purchasing an iPhone or a screenshot service. Its main limitation is fidelity: desktop CPU architecture and browser behavior can differ from the target phone. Network and CPU throttling can expose some bottlenecks, but they are simulated settings and should not be reported as measurements from iPhone 15 hardware.

For repeatable visual checks, record the viewport width and height, DPR, device type, orientation, browser version, and any throttling settings. Recheck after browser updates if a preset or control changes. Use a real-device pass for issues where differences in the operating system, browser engine, touch input, or hardware could change the result.

FAQ

Is 393 × 852 the official Apple CSS viewport?

No. It is a third-party emulation reference from YesViz. Apple publishes physical display specifications, not that CSS viewport guarantee.

Should I enter 2556 × 1179 in Chrome?

No. Those are physical display pixels. Enter CSS viewport dimensions and configure DPR separately.

Does choosing Mobile make Chrome emulate iOS Safari?

No. It changes simulated device characteristics, but the page remains in desktop Chrome.

Do I need an iPhone 15 to follow this guide?

No. The custom profile is sufficient for desktop layout inspection. A real device is useful when validating actual iOS behavior.