How to Emulate an iPhone 15 Viewport in Chrome DevTools

This guide shows you how to use Chrome DevTools to preview your website or app exactly as it would appear on an iPhone 15, including the correct screen dimensions, pixel density, and safe area insets. You’ll learn how to set up the device emulator, toggle responsive mode, and verify your design against the iPhone 15’s specific viewport characteristics—no physical device needed.

What You’ll Need

Google Chrome (latest version recommended; the steps work on Chrome 90 and newer).
A web page or local file you want to test (open it in Chrome).
Optional: a ruler or screenshot tool if you need to verify visual dimensions.

Step-by-Step

Open Chrome DevTools. On the page you want to test, right-click anywhere and select Inspect, or press F12 (Windows/Linux) or Cmd+Option+I (Mac). The DevTools panel opens, usually docked to the right or bottom.
Enable Device Toolbar. In DevTools, click the Toggle device toolbar icon (a rectangle with a phone outline) in the top-left corner, or press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (Mac). The page will switch to a mobile emulation view.
Select the iPhone 15 preset. At the top of the device toolbar, you’ll see a dropdown that currently shows something like Responsive or the last device you used. Click it and scroll to the bottom under Devices; select iPhone 15. If you don’t see it, ensure the device list is up to date (Chrome updates automatically).
Check the viewport dimensions. After selecting iPhone 15, the toolbar will display the viewport size in CSS pixels: 393 × 852. This is the logical resolution. The device pixel ratio (DPR) is set to 3, meaning each CSS pixel maps to 3 physical pixels on the actual screen.
Adjust for the notch and safe areas. The iPhone 15 has a notch (or Dynamic Island) and rounded corners. To simulate these, click the three-dot menu (⋯) in the device toolbar and select Show device frame. This overlays a visual bezel, but for accurate safe-area testing, you need to use CSS env(safe-area-inset-*) in your code. In DevTools, you can simulate the inset by adding a custom device or by using the CSS media features panel (see Tips).
Test in portrait and landscape. Click the rotate icon (a circular arrow) next to the dimensions to switch between portrait (393×852) and landscape (852×393). Note that in landscape, the safe areas change, so test both orientations.
Use the responsive mode for custom widths. If you need to test at a specific width (e.g., 400px), choose Responsive from the device dropdown and drag the handles to set the width and height manually. This is useful for testing breakpoints just above or below the iPhone 15 size.
Simulate touch and other features. The device toolbar automatically enables touch emulation. You can also test network conditions (e.g., 4G) by clicking the Network dropdown (usually shows No throttling) and selecting a preset like Fast 4G.
Verify with the console. To confirm the viewport is correct, open the Console tab in DevTools and type window.innerWidth and window.innerHeight. In portrait, you should see 393 and 852 (or close to it, depending on scrollbars).
Take a screenshot. Click the three-dot menu in the device toolbar and select Capture screenshot to save a full-page screenshot at the emulated resolution. This is handy for sharing with your team or comparing designs.

Common Mistakes

Forgetting to set the device pixel ratio. If you manually set the viewport size to 393×852 but leave DPR at 1, your media queries that rely on resolution or device-pixel-ratio will not fire correctly. Always use the preset for iPhone 15 to get DPR=3.
Ignoring safe-area insets. Many developers only check the width and height, but the notch and home indicator can cover content. If you don’t use env(safe-area-inset-top) etc., your buttons or text might be obscured on the real device.
Testing only in portrait. Mobile users often rotate their phones. The landscape viewport is much shorter (393px height) and has different safe areas, so test both.
Using the wrong device preset. The iPhone 15 Pro Max has a different viewport (430×932). Make sure you select the exact model you’re targeting, not just any iPhone.
Not refreshing after changing device. Some CSS or JS might not re-evaluate immediately. Always reload the page (Ctrl+R or Cmd+R) after switching devices to ensure all media queries are applied.

Tips

Use the media query bar. In the device toolbar, click the icon that looks like a split rectangle (next to the dimensions) to open the media query bar. This shows colored bars for each breakpoint in your CSS, letting you jump between them.
Simulate safe areas with CSS. To test safe-area insets without a physical device, you can add a temporary CSS rule like body { padding-top: env(safe-area-inset-top); } and then in DevTools, go to the Rendering tab (press Ctrl+Shift+P, type “Rendering”) and check Emulate CSS media feature prefers-color-scheme—but for safe areas, you’ll need to use the Device section in the Emulation panel (more advanced).
Save your custom devices. If you frequently test at a specific size, click the device dropdown, select Edit, then Add custom device. You can set the width, height, DPR, and even a user agent string.
Check the console for viewport warnings. Some sites show warnings if the viewport meta tag is missing or incorrect. Make sure your HTML includes <meta name="viewport" content="width=device-width, initial-scale=1">.
Use the device toolbar’s “Show rulers” option. This helps you measure distances precisely when checking spacing or alignment.

Troubleshooting

iPhone 15 doesn’t appear in the device list. First, make sure Chrome is up to date (Settings > About Chrome). If it’s still missing, you can manually add it: click the device dropdown > Edit > Add custom device and enter: Name: iPhone 15, Width: 393, Height: 852, Device pixel ratio: 3, User agent string: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1 (or a newer version string).

The page looks different from a real iPhone. Emulation is not perfect. Differences can arise from: browser rendering (Chrome uses Blink, while Safari uses WebKit), missing touch events, or hardware acceleration. For final testing, use a real device or a cloud-based device farm. Also, check that you haven’t accidentally left the Responsive mode active instead of the preset.

The viewport dimensions don’t match 393×852. This can happen if the page has a minimum-scale or maximum-scale in the viewport meta tag that overrides the device width. Also, if you have zoomed the page (Ctrl+/-), the emulated viewport will scale. Reset zoom to 100%.

Media queries for iPhone 15 aren’t firing. Make sure you’re using max-width: 393px or similar, but remember that media queries are based on viewport width, not device model. If you’re using a custom device with a different width, your queries won’t match. Double-check the DPR—some queries use min-resolution.

Touch simulation isn’t working. Click the three-dot menu in the device toolbar and ensure Emulate touch screen is checked. Also, if you have a touchscreen laptop, you might need to disable the “touch” option in the browser’s own settings to avoid conflicts.

Frequently Asked Questions

Q: Does the iPhone 15 emulation in Chrome exactly match the real device?
A: No. It matches the viewport size, DPR, and user agent, but rendering differences exist because Chrome uses a different engine than Safari. Use it for layout checks, not for final pixel-perfect validation.

Q: What is the exact viewport size of the iPhone 15?
A: In CSS pixels, it’s 393×852 in portrait and 852×393 in landscape. The device pixel ratio is 3, so the physical resolution is 1179×2556 pixels.

Q: How do I test the notch or Dynamic Island in Chrome?
A: The device frame overlay shows a visual representation, but it doesn’t affect layout. To test safe areas, you must use CSS env(safe-area-inset-*) and then use the Emulation panel to set the insets manually (via the “Sensors” or “Device” tabs).

Q: Can I emulate the iPhone 15 Pro Max as well?
A: Yes. The preset list includes iPhone 15 Pro Max (430×932, DPR 3). If not, add it as a custom device.

Q: Why does my website look different in Chrome emulation vs. Safari on a real iPhone?
A: Differences stem from browser engines (Blink vs. WebKit), CSS support, and default styles. Always test in Safari on a real device or via a service like BrowserStack for final QA.

Q: Is there a keyboard shortcut to toggle the device toolbar?
A: Yes, press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (Mac) to toggle it quickly.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →