iPhone 17 Pro vs iPhone 17 Pro Max: screen size and viewport
The iPhone 17 Pro lays web pages out at 402 × 874 CSS px with a pixel ratio of 3; the iPhone 17 Pro Max at 440 × 956 with 3. The iPhone 17 Pro Max is 38 px wider and 82 px taller.
The two screens side by side
Specs compared
| Spec | iPhone 17 Pro | iPhone 17 Pro Max | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 402 × 874 | 440 × 956 | −38 px wide, −82 px tall |
| Device pixel ratio | 3 | 3 | same |
| Physical resolution | 1206 × 2622 | 1320 × 2868 | iPhone 17 Pro Max: 20% more pixels |
| Aspect ratio | 19.5:9 | 19.5:9 | about the same |
| Visible height, portrait, with browser bars | ~684 px | ~766 px | −82 px for the iPhone 17 Pro |
| Landscape width (CSS px) | 874 px | 956 px | −82 px for the iPhone 17 Pro |
| Visible height, landscape | ~352 px | ~390 px | −38 px for the iPhone 17 Pro |
| First released | 2024 | 2024 | same year |
| Engine in MobileCheck | WebKit (Safari) | WebKit (Safari) | same engine |
CSS px are the units media queries see. Visible heights subtract the status bar and the Safari on iOS bars as set in our device profiles; real bar heights vary with settings and scrolling. The release year is that of the first model with each screen.
What this means for your layout
How the width difference affects your layout
The iPhone 17 Pro Max is 38 CSS px wider (440 vs 402, 9% more). 2 common breakpoints fall between them: (min-width: 414px) (a common large-phone test width), (min-width: 430px) (a common large-phone test width) match the iPhone 17 Pro Max but not the iPhone 17 Pro, so a rule written for that width applies on only one of the two.
In a 2-column card grid with 16 px page padding and 16 px gaps, each card is 196 px wide on the iPhone 17 Pro Max and 177 px on the iPhone 17 Pro. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
Both draw each CSS pixel with 3 × 3 device pixels, so text and icons are equally sharp. A full-width image (sizes="100vw") needs about 1206 px on the iPhone 17 Pro and 1320 px on the iPhone 17 Pro Max to look sharp.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1290w file on the iPhone 17 Pro and the 1440w file on the iPhone 17 Pro Max. Leave out the 1440w candidate and the iPhone 17 Pro Max upscales a smaller file.
Above 2× most people can't see much difference in photos, so capping photo candidates around twice the CSS width saves bytes on both. Keep SVG for icons and logos: they stay sharp at any ratio.
How much fits above the fold
On first load about 766 px of the page is visible on the iPhone 17 Pro Max and 684 px on the iPhone 17 Pro: 82 px less (12%) on the iPhone 17 Pro, roughly 3 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the iPhone 17 Pro Max, it can end up below it on the iPhone 17 Pro. Keep the headline and the main action within the first 684 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
In landscape
Turned sideways, the iPhone 17 Pro is 874 px wide and the iPhone 17 Pro Max 956 px. The visible height drops to about 352 and 390 px, so a 64 px sticky header covers 18% and 16% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Same browser engine
Both are Apple devices, so both render with WebKit, the engine behind Safari. Engine quirks are the same; the differences above come from size alone. Chrome DevTools only emulates the size and still draws with Chromium, so check Apple devices in a WebKit browser — see how to test on an iPhone.
More about these devices
- iPhone 17 Pro viewport size — one screen for the iPhone 16 Pro / 17 / 17 Pro
- iPhone 17 Pro Max viewport size — one screen for the iPhone 16 Pro Max / 17 Pro Max
Or open the free check with the iPhone 17 Pro and the iPhone 17 Pro Max preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 16 Pro vs Galaxy S24 Ultra — 402 vs 384 px wide, 3× vs 2.813×
- iPhone 16 Pro Max vs Galaxy S24 Ultra — 440 vs 384 px wide, 3× vs 2.813×
- iPhone 17 vs Galaxy S25 — 402 vs 360 px wide, 3× vs 3×
- iPhone 17 vs Pixel 9 — 402 vs 412 px wide, 3× vs 2.625×
- iPhone 17 Pro Max vs Pixel 10 — 440 vs 412 px wide, 3× vs 2.625×
- iPhone 17 Pro vs Pixel 9 Pro — 402 vs 427 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 17 Pro screen bigger than the iPhone 17 Pro Max?
In CSS pixels, which decide how much of a page fits, the iPhone 17 Pro Max is larger: 440 × 956 against 402 × 874. The iPhone 17 Pro Max has more physical pixels (1320 × 2868), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 17 Pro and the iPhone 17 Pro Max?
Only if your breakpoints fall between 402 and 440 px: a min-width query at 414px or 430px applies to one and not the other. A fluid layout handles both without device-specific rules.
How much of a web page is visible on the iPhone 17 Pro vs the iPhone 17 Pro Max?
About 402 × 684 CSS px on the iPhone 17 Pro and 440 × 766 on the iPhone 17 Pro Max when a page first opens in portrait, after the status bar and Safari on iOS's bars. Bar heights are our device profiles' estimates.