iPhone 18 Pro / Pro Max: Screen Size & CSS Viewport

The iPhone 18 Pro and iPhone 18 Pro Max keep the exact panels of their predecessors: 2622×1206 pixels on the 6.3″ model and 2868×1320 on the 6.9″ model, both at a device pixel ratio of 3. That gives CSS viewports of 402×874 and 440×956, identical to the iPhone 17 Pro line. For web developers this is good news. If your layouts already hold up on the 17 Pro, nothing about the viewport math changes, and these two widths will stay the most common premium iPhone sizes in your analytics for at least another year.

Both widths sit well below the first Tailwind breakpoint (sm, 640px) and the first Bootstrap breakpoint (sm, 576px), so every visitor on these phones receives your base mobile styles. The interesting edges appear when the phone is rotated: 874px crosses md (768px) and 956px sits just under lg (1024px). A landscape iPhone 18 Pro Max therefore receives your tablet layout, often with a navigation bar that assumes far more vertical room than 440px of height can offer. Test both orientations, and check that sticky headers and cookie banners do not eat half the landscape viewport.

The smaller Dynamic Island shifts the top safe area slightly, so pages that use env(safe-area-inset-top) with viewport-fit=cover should be rechecked rather than assumed. Serve full-width images at 1206px and 1320px wide through srcset so the 3× panel stays sharp without shipping desktop-sized files. Touch targets need at least 44 CSS pixels, and the 402px width leaves little room for two side-by-side buttons with generous padding.

The 3000 nit outdoor peak means more browsing happens in direct sunlight. Low-contrast grey text and thin hairline borders that look elegant on a desk monitor can vanish outdoors, so verify your contrast ratios meet WCAG AA at the very least.