iPhone 15 vs Galaxy S24: screen size and viewport
The iPhone 15 lays web pages out at 393 × 852 CSS px with a pixel ratio of 3; the Galaxy S24 at 360 × 780 with 3. The iPhone 15 is 33 px wider and 72 px taller.
The two screens side by side
Specs compared
| Spec | iPhone 15 | Galaxy S24 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 393 × 852 | 360 × 780 | +33 px wide, +72 px tall |
| Device pixel ratio | 3 | 3 | same |
| Physical resolution | 1179 × 2556 | 1080 × 2340 | iPhone 15: 19% more pixels |
| Aspect ratio | 19.5:9 | 19.5:9 | about the same |
| Visible height, portrait, with browser bars | ~662 px | ~684 px | −22 px for the iPhone 15 |
| Landscape width (CSS px) | 852 px | 780 px | +72 px for the iPhone 15 |
| Visible height, landscape | ~343 px | ~280 px | +63 px for the iPhone 15 |
| First released | 2022 | 2022 | 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 15 is 33 CSS px wider (393 vs 360, 9% more). 2 common breakpoints fall between them: (min-width: 375px) (a common small-phone test width), (min-width: 390px) (a common phone test width) match the iPhone 15 but not the Galaxy S24, 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 172 px wide on the iPhone 15 and 156 px on the Galaxy S24. 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 1179 px on the iPhone 15 and 1080 px on the Galaxy S24 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 15 and the 1080w file on the Galaxy S24. Leave out the 1290w candidate and the iPhone 15 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 684 px of the page is visible on the Galaxy S24 and 662 px on the iPhone 15: 22 px less (3%) on the iPhone 15. The Galaxy S24 has the shorter screen but shows more, because its bars take less room (96 vs 190 px). That's less than one line of body text, so in practice both show the same first screen.
In landscape
Turned sideways, the iPhone 15 is 852 px wide and the Galaxy S24 780 px; (min-width: 840px) matches only the iPhone 15 in landscape. The visible height drops to about 343 and 280 px, so a 64 px sticky header covers 19% and 23% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Different browser engines
The iPhone 15 renders with WebKit (Safari's engine) and the Galaxy S24 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 15 viewport size — one screen for the iPhone 14 Pro / 15 / 15 Pro / 16
- Galaxy S24 viewport size — one screen for the Samsung Galaxy S22 / S23 / S24 / S25
Or open the free check with the iPhone 15 and the Galaxy S24 preselected: full-page screenshots in WebKit and Chromium, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 17 vs Galaxy S25 — 402 vs 360 px wide, 3× vs 3×
- iPhone 15 vs Pixel 8 — 393 vs 412 px wide, 3× vs 2.625×
- iPhone Air vs Galaxy S25 — 420 vs 360 px wide, 3× vs 3×
- Xiaomi 13 vs iPhone 15 — both 393 px wide, 873 vs 852 px tall
- iPhone 16 vs iPhone 17 — 393 vs 402 px wide, 3× vs 3×
- iPhone 15 Pro vs iPhone 15 Pro Max — 393 vs 430 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 15 screen bigger than the Galaxy S24?
In CSS pixels, which decide how much of a page fits, the iPhone 15 is larger: 393 × 852 against 360 × 780. The iPhone 15 has more physical pixels (1179 × 2556), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 15 and the Galaxy S24?
Only if your breakpoints fall between 360 and 393 px: a min-width query at 375px or 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 15 vs the Galaxy S24?
About 393 × 662 CSS px on the iPhone 15 and 360 × 684 on the Galaxy S24 when a page first opens in portrait, after the status bar and the browser's bars. Bar heights are our device profiles' estimates.