iPhone 17 vs Pixel 9: screen size and viewport
The iPhone 17 lays web pages out at 402 × 874 CSS px with a pixel ratio of 3; the Pixel 9 at 412 × 924 with 2.625. The Pixel 9 is 10 px wider and 50 px taller. The iPhone 17 has more physical pixels, but that only makes it sharper: the CSS viewport decides how much of a page fits.
The two screens side by side
Specs compared
| Spec | iPhone 17 | Pixel 9 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 402 × 874 | 412 × 924 | −10 px wide, −50 px tall |
| Device pixel ratio | 3 | 2.625 | +0.375 for the iPhone 17 |
| Physical resolution | 1206 × 2622 | 1082 × 2426 | iPhone 17: 20% more pixels |
| Aspect ratio | 19.5:9 | 20:9 | Pixel 9 is taller |
| Visible height, portrait, with browser bars | ~684 px | ~828 px | −144 px for the iPhone 17 |
| Landscape width (CSS px) | 874 px | 924 px | −50 px for the iPhone 17 |
| Visible height, landscape | ~352 px | ~332 px | +20 px for the iPhone 17 |
| 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 Pixel 9 is 10 CSS px wider (412 vs 402, 2% more). No common breakpoint falls between 402 and 412 px, so with typical media queries both get the same layout and the extra 10 pixels only stretch fluid columns, text lines and images.
In a 2-column card grid with 16 px page padding and 16 px gaps, each card is 182 px wide on the Pixel 9 and 177 px on the iPhone 17. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
The iPhone 17 has the denser screen: 3× against 2.625×. A full-width image (sizes="100vw") needs about 1206 px on the iPhone 17 and 1082 px on the Pixel 9 to look sharp — more on the iPhone 17 even though its viewport is narrower.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1290w file on the iPhone 17 and the same one on the Pixel 9.
The Pixel 9'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 9 and 684 px on the iPhone 17: 144 px less (21%) on the iPhone 17, roughly 6 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the Pixel 9, it can end up below it on the iPhone 17. 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.
Relative to its width, the Pixel 9 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 is 874 px wide and the Pixel 9 924 px. The visible height drops to about 352 and 332 px, so a 64 px sticky header covers 18% and 19% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Different browser engines
The iPhone 17 renders with WebKit (Safari's engine) and the Pixel 9 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 viewport size — one screen for the iPhone 16 Pro / 17 / 17 Pro
- Pixel 9 viewport size — one screen for the Google Pixel 9 / 9a / 10
Or open the free check with the iPhone 17 and the Pixel 9 preselected: full-page screenshots in WebKit and Chromium, 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 17 vs Galaxy S25 — 402 vs 360 px wide, 3× vs 3×
- iPhone 17 Pro Max vs Pixel 10 — 440 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 Pixel 9 Pro — 402 vs 427 px wide, 3× vs 3×
- Xiaomi 15 vs iPhone 17 — 400 vs 402 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 17 screen bigger than the Pixel 9?
In CSS pixels, which decide how much of a page fits, the Pixel 9 is larger: 412 × 924 against 402 × 874. The iPhone 17 has more physical pixels (1206 × 2622), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 17 and the Pixel 9?
Usually not. No common breakpoint falls between their widths (402 and 412 px), so a fluid layout gets the same rules on both and only stretches by 10 px.
How much of a web page is visible on the iPhone 17 vs the Pixel 9?
About 402 × 684 CSS px on the iPhone 17 and 412 × 828 on the Pixel 9 when a page first opens in portrait, after the status bar and the browser's bars. Bar heights are our device profiles' estimates.