iPhone 16 Pro vs Galaxy S24 Ultra: screen size and viewport
The iPhone 16 Pro lays web pages out at 402 × 874 CSS px with a pixel ratio of 3; the Galaxy S24 Ultra at 384 × 832 with 2.813. The iPhone 16 Pro is 18 px wider and 42 px taller.
The two screens side by side
Specs compared
| Spec | iPhone 16 Pro | Galaxy S24 Ultra | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 402 × 874 | 384 × 832 | +18 px wide, +42 px tall |
| Device pixel ratio | 3 | 2.813 | +0.188 for the iPhone 16 Pro |
| Physical resolution | 1206 × 2622 | 1080 × 2340 | iPhone 16 Pro: 25% more pixels |
| Aspect ratio | 19.5:9 | 19.5:9 | about the same |
| Visible height, portrait, with browser bars | ~684 px | ~736 px | −52 px for the iPhone 16 Pro |
| Landscape width (CSS px) | 874 px | 832 px | +42 px for the iPhone 16 Pro |
| Visible height, landscape | ~352 px | ~304 px | +48 px for the iPhone 16 Pro |
| 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 16 Pro is 18 CSS px wider (402 vs 384, 5% more). One common breakpoint falls between them: (min-width: 390px) (a common phone test width) matches the iPhone 16 Pro but not the Galaxy S24 Ultra, 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 177 px wide on the iPhone 16 Pro and 168 px on the Galaxy S24 Ultra. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
The iPhone 16 Pro has the denser screen: 3× against 2.813×. A full-width image (sizes="100vw") needs about 1206 px on the iPhone 16 Pro and 1080 px on the Galaxy S24 Ultra 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 16 Pro and the 1080w file on the Galaxy S24 Ultra. Leave out the 1290w candidate and the iPhone 16 Pro upscales a smaller file.
The Galaxy S24 Ultra's ratio of 2.813 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 736 px of the page is visible on the Galaxy S24 Ultra and 684 px on the iPhone 16 Pro: 52 px less (8%) on the iPhone 16 Pro, roughly 2 lines of 16 px body text at a 1.5 line height. The Galaxy S24 Ultra 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 Galaxy S24 Ultra, it can end up below it on the iPhone 16 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 16 Pro is 874 px wide and the Galaxy S24 Ultra 832 px; (min-width: 840px) matches only the iPhone 16 Pro in landscape. The visible height drops to about 352 and 304 px, so a 64 px sticky header covers 18% and 21% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Different browser engines
The iPhone 16 Pro renders with WebKit (Safari's engine) and the Galaxy S24 Ultra 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 16 Pro viewport size — one screen for the iPhone 16 Pro / 17 / 17 Pro
- Galaxy S24 Ultra viewport size — one screen for the Samsung Galaxy S24 / S25 Ultra / A15 / A54 / A55
Or open the free check with the iPhone 16 Pro and the Galaxy S24 Ultra 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 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 15 Pro Max vs Galaxy S24 Ultra — 430 vs 384 px wide, 3× vs 2.813×
- 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 16 Pro screen bigger than the Galaxy S24 Ultra?
In CSS pixels, which decide how much of a page fits, the iPhone 16 Pro is larger: 402 × 874 against 384 × 832. The iPhone 16 Pro has more physical pixels (1206 × 2622), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 16 Pro and the Galaxy S24 Ultra?
Only if your breakpoints fall between 384 and 402 px: a min-width query at 390px 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 16 Pro vs the Galaxy S24 Ultra?
About 402 × 684 CSS px on the iPhone 16 Pro and 384 × 736 on the Galaxy S24 Ultra when a page first opens in portrait, after the status bar and the browser's bars. Bar heights are our device profiles' estimates.