iPhone 17 Pro Max vs Pixel 10: screen size and viewport
The iPhone 17 Pro Max lays web pages out at 440 × 956 CSS px with a pixel ratio of 3; the Pixel 10 at 412 × 924 with 2.625. The iPhone 17 Pro Max is 28 px wider and 32 px taller.
The two screens side by side
Specs compared
| Spec | iPhone 17 Pro Max | Pixel 10 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 440 × 956 | 412 × 924 | +28 px wide, +32 px tall |
| Device pixel ratio | 3 | 2.625 | +0.375 for the iPhone 17 Pro Max |
| Physical resolution | 1320 × 2868 | 1082 × 2426 | iPhone 17 Pro Max: 44% more pixels |
| Aspect ratio | 19.5:9 | 20:9 | Pixel 10 is taller |
| Visible height, portrait, with browser bars | ~766 px | ~828 px | −62 px for the iPhone 17 Pro Max |
| Landscape width (CSS px) | 956 px | 924 px | +32 px for the iPhone 17 Pro Max |
| Visible height, landscape | ~390 px | ~332 px | +58 px for the iPhone 17 Pro Max |
| First released | 2024 | 2024 | same year |
| Engine in MobileCheck | WebKit (Safari) | Chromium (Chrome) | different engines |
CSS px are the units media queries see. Visible heights subtract the status bar and the Safari on iOS and Chrome on Android 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 28 CSS px wider (440 vs 412, 7% 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 Pixel 10, 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 182 px on the Pixel 10. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
The iPhone 17 Pro Max has the denser screen: 3× against 2.625×. A full-width image (sizes="100vw") needs about 1320 px on the iPhone 17 Pro Max and 1082 px on the Pixel 10 to look sharp.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1440w file on the iPhone 17 Pro Max and the 1290w file on the Pixel 10. Leave out the 1440w candidate and the iPhone 17 Pro Max upscales a smaller file.
The Pixel 10's ratio of 2.625 is fractional: one CSS pixel isn't a whole number of device pixels, so 1 px borders and hairlines can be rounded unevenly. Check thin lines on that screen rather than assuming they match.
How much fits above the fold
On first load about 828 px of the page is visible on the Pixel 10 and 766 px on the iPhone 17 Pro Max: 62 px less (8%) on the iPhone 17 Pro Max, roughly 2 lines of 16 px body text at a 1.5 line height. The Pixel 10 has the shorter screen but shows more, because its bars take less room (96 vs 190 px).
If your main button sits just above the fold on the Pixel 10, it can end up below it on the iPhone 17 Pro Max. Keep the headline and the main action within the first 766 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
Relative to its width, the Pixel 10 has the taller screen (19.5:9 vs 20:9), so the same content is laid out narrower but more of its length fits at once.
In landscape
Turned sideways, the iPhone 17 Pro Max is 956 px wide and the Pixel 10 924 px. The visible height drops to about 390 and 332 px, so a 64 px sticky header covers 16% and 19% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Different browser engines
The iPhone 17 Pro Max renders with WebKit (Safari's engine) and the Pixel 10 with Chromium (Chrome's), so fonts, form controls and some CSS can differ on top of the size difference. Chrome DevTools draws every emulated device with Chromium, which hides WebKit-only problems — see how to test on an iPhone and on Android.
More about these devices
- iPhone 17 Pro Max viewport size — one screen for the iPhone 16 Pro Max / 17 Pro Max
- Pixel 10 viewport size — one screen for the Google Pixel 9 / 9a / 10
Or open the free check with the iPhone 17 Pro Max and the Pixel 10 preselected: full-page screenshots in WebKit and Chromium, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 16 Pro Max vs Galaxy S24 Ultra — 440 vs 384 px wide, 3× vs 2.813×
- iPhone 17 vs Pixel 9 — 402 vs 412 px wide, 3× vs 2.625×
- iPhone Air vs Pixel 9 — 420 vs 412 px wide, 3× vs 2.625×
- iPhone 17 Pro vs iPhone 17 Pro Max — 402 vs 440 px wide, 3× vs 3×
- iPhone 15 Pro Max vs iPhone 16 Pro Max — 430 vs 440 px wide, 3× vs 3×
- iPhone Air vs iPhone 17 Pro Max — 420 vs 440 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 17 Pro Max screen bigger than the Pixel 10?
In CSS pixels, which decide how much of a page fits, the iPhone 17 Pro Max is larger: 440 × 956 against 412 × 924. 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 Max and the Pixel 10?
Only if your breakpoints fall between 412 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 Max vs the Pixel 10?
About 440 × 766 CSS px on the iPhone 17 Pro Max and 412 × 828 on the Pixel 10 when a page first opens in portrait, after the status bar and the browser's bars. Bar heights are our device profiles' estimates.