Viewport sizes

iPhone viewport sizes in CSS pixels

A media query never sees the 1206 or 1320 physical pixels on the box. It sees the width in CSS pixels, which on iPhone is the same as Apple’s points. Here are those numbers for every iPhone Apple sells in November 2026, the older ones your visitors still carry, and how to test them.

Updated 10 November 2026

Short answerEvery standard iPhone Apple sells today is between 390 and 440 CSS px wide in portrait: 402 px on iPhone 18 Pro and iPhone 17, 440 px on iPhone 18 Pro Max, 420 px on iPhone Air, 393 px on iPhone 16 and 390 px on iPhone 17e. The folding iPhone Duo is the exception, at 382 px closed and 669 px open. Older iPhones still in use go down to 375 px.

The iPhones Apple sells today

This is the line-up on Apple’s site on 10 November 2026. Sizes are for portrait.

Model	Viewport (CSS px)	Screen pixels	Scale
iPhone 18 Pro Max	440 × 956	1320 × 2868	3×
iPhone 18 Pro	402 × 874	1206 × 2622	3×
iPhone Air	420 × 912	1260 × 2736	3×
iPhone 17	402 × 874	1206 × 2622	3×
iPhone 17e	390 × 844	1170 × 2532	3×
iPhone 16	393 × 852	1179 × 2556	3×

The screen pixels are from Apple’s technical specifications. Divide by the scale factor to get points, and Safari uses points as CSS pixels when the page has <meta name="viewport" content="width=device-width, initial-scale=1">. The width is what window.innerWidth reports in portrait and what min-width and max-width media queries compare against. Without that tag, Safari lays the page out 980 px wide and shrinks it to fit.

The iPhone Duo gives a page 382 px closed and 669 px open, which is not what its screen size suggests. It has its own guide.

Older iPhones still in use

People keep phones for years, so the list you support is longer than the list Apple sells.

Viewport (CSS px)	Models
375 × 667	iPhone SE (2nd and 3rd generation), iPhone 8
375 × 812	iPhone 12 mini, 13 mini, X, XS, 11 Pro
390 × 844	iPhone 12, 12 Pro, 13, 13 Pro, 14, 16e
393 × 852	iPhone 14 Pro, 15, 15 Pro
402 × 874	iPhone 16 Pro, 17 Pro
414 × 896	iPhone XR, 11, XS Max, 11 Pro Max
428 × 926	iPhone 12 Pro Max, 13 Pro Max, 14 Plus
430 × 932	iPhone 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus
440 × 956	iPhone 16 Pro Max, 17 Pro Max

So a phone layout has to work from 375 to 440 px, and nine different widths in that range are common: 375, 390, 393, 402, 414, 420, 428, 430 and 440. All of these phones are 3× except iPhone SE, 8, XR and 11, which are 2×.

What Safari does to the height, and to landscape

The heights above are the whole screen. Safari’s address bar and toolbar take part of it, and they shrink as you scroll, so the visible height changes while the page is open. 100vh doesn’t follow that change. Use 100svh for the height with Safari’s bars showing, 100lvh with them retracted, or 100dvh to track the change.
Landscape is narrower than the long side. Turn the phone and the long side becomes the width, but Safari keeps the page inside the display’s safe area, clear of the rounded corners and sensor housing. The page only gets the full width if you set viewport-fit=cover, and then you pad it yourself with env(safe-area-inset-left) and env(safe-area-inset-right).
Some visitors are narrower than the table. iPhone’s Display Zoom setting makes everything on screen larger, which lays pages out on a narrower viewport. WCAG’s Reflow criterion asks for content to work at 320 CSS px wide without sideways scrolling, and that is a sensible floor to test.

What to do with the numbers

Don’t write a media query per phone. One fluid layout should cover 320 to 440 px. The widths are for testing, not for targeting.
Test the ends and the middle: 375 px (the narrowest current hardware), 390 to 402 px (the most common recent phones) and 440 px (the widest).
Look for fixed widths between 375 and 440. A 400 px card fits an iPhone 17 at 402 px and overflows an iPhone 17e at 390 px. That is the usual reason a page scrolls sideways on some iPhones and not others.
Don’t read the device from the width. A 440 px viewport might be a Pro Max or a narrow window on an iPad. See where iPhones and iPads fall in common breakpoints.

How to test iPhone widths

A real iPhone. The truth for that one model, including Safari’s bars and touch behaviour. It only shows its own width.
Xcode’s Simulator (free, needs a Mac). Every current iPhone with real Safari.
Desktop browser devtools. Safari’s Responsive Design Mode on a Mac, or device mode in Chrome and Firefox. Type the width yourself if the preset list doesn’t have the model yet.
On an iPhone or iPad, a viewport app such as ViewPortal (below) renders the page at another iPhone’s width. The options are compared in responsive design mode on iPhone and iPad.

Checking iPhone widths in ViewPortal

ViewPortal has presets for iPhone SE (375 × 667), iPhone 17e (390 × 844), iPhone 17 and 17 Pro (402 × 874), iPhone 17 Pro Max (440 × 956) and iPhone Duo closed and open. iPhone 18 Pro and 18 Pro Max have the same viewports as the 17 Pro and 17 Pro Max, so those presets cover them. For iPhone 16 (393 × 852), iPhone Air (420 × 912) or a 320 px check, add a custom size. Each preset sets the page’s layout viewport to that width, so media queries fire as they would on that phone, and a readout shows the size in use.

The limits: ViewPortal uses the iOS web engine but it isn’t Safari. Its presets use the full screen height rather than the height left under Safari’s bars, and its landscape presets use the full long side without Safari’s safe-area inset. Trust it for widths and breakpoints, and check height-sensitive layouts in Safari on a real phone. ViewPortal is free to download, with no accounts and no tracking. Multi-view, dev-server previews and the dev tools are in Pro, a one-time £4.99 unlock.

ViewPortal on the App Store

Questions people ask

What is the viewport width of an iPhone?

Between 375 and 440 CSS pixels in portrait for every iPhone from the iPhone X and the second-generation SE onwards. The iPhones Apple sells today are 390, 393, 402, 420 or 440 px wide. The folding iPhone Duo is 382 px closed and 669 px open.

What is the iPhone 18 Pro viewport size?

402 × 874 CSS pixels at 3×, the same as iPhone 17, 17 Pro and 16 Pro. iPhone 18 Pro Max is 440 × 956, the same as 17 Pro Max and 16 Pro Max.

What is the iPhone 17 viewport size?

iPhone 17 and 17 Pro are 402 × 874 CSS pixels. iPhone 17 Pro Max is 440 × 956, iPhone Air is 420 × 912 and iPhone 17e is 390 × 844. All are 3×.

Is the viewport size the same as the screen resolution?

No. The resolution is in physical pixels, for example 1206 × 2622 on iPhone 17. The viewport is in CSS pixels: the resolution divided by the scale factor of 3, which gives 402 × 874. Media queries use CSS pixels.

What is the smallest iPhone width I should support?

375 px is the narrowest full-screen width among iPhones from the iPhone X and second-generation SE onwards, including the 12 and 13 mini. Test at 320 px as well: Display Zoom can narrow the viewport, and WCAG’s Reflow criterion uses 320 CSS pixels.

Why is 100vh too tall on iPhone?

Because 100vh is the height with Safari’s bars retracted, so it is taller than the visible area when they are showing. Use 100svh or 100dvh, with 100vh as a fallback for old browsers.