How to check a website on iPhone sizes
You don't need a drawer of phones. A page only cares about the viewport width in CSS pixels, and you can reproduce that exactly in Chrome.
iPhone viewport sizes
| iPhone | CSS viewport | Pixel ratio |
|---|---|---|
| iPhone SE (2nd and 3rd gen) | 375 × 667 | 2× |
| iPhone 13 / 14 | 390 × 844 | 3× |
| iPhone 16 Pro | 402 × 874 | 3× |
| iPhone Air | 420 × 912 | 3× |
| iPhone 16 Pro Max / 17 Pro Max | 440 × 956 | 3× |
The widths cluster between 375 and 440 px. If your layout works at 375 and 440, it almost always works in between.
Preview them in Chrome
- Open your page and press F12, then Ctrl + Shift + M.
- Choose an iPhone from the device list, or type the width and height from the table.
- Reload the page so it picks up the mobile user agent.
What a desktop preview can't show
Chrome renders with Chrome's engine, not Safari's, so check Safari-only details (like some date inputs and the bottom address bar) on a real device before launch. For layout, spacing and breakpoints, a correct viewport size is what matters.
Do it in one click with Ditto.
Ditto is a free Chrome and Edge extension that puts phones, tablets and desktop widths side by side over the page you are on, with scrolling, clicks and typing kept in sync. Nothing leaves your computer.
See Ditto
Ditto is a free Chrome and Edge extension that puts phones, tablets and desktop widths side by side over the page you are on, with scrolling, clicks and typing kept in sync. Nothing leaves your computer.
See Ditto