Galaxy Z Flip 6 vs Galaxy S24: screen size and viewport
The Galaxy Z Flip 6 lays web pages out at 360 × 880 CSS px with a pixel ratio of 3; the Galaxy S24 at 360 × 780 with 3. They are the same width, and the Galaxy Z Flip 6 is 100 px taller.
The two screens side by side
Specs compared
| Spec | Galaxy Z Flip 6 | Galaxy S24 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 360 × 880 | 360 × 780 | same width, +100 px tall |
| Device pixel ratio | 3 | 3 | same |
| Physical resolution | 1080 × 2640 | 1080 × 2340 | Galaxy Z Flip 6: 13% more pixels |
| Aspect ratio | 22:9 | 19.5:9 | Galaxy Z Flip 6 is taller |
| Visible height, portrait, with browser bars | ~784 px | ~684 px | +100 px for the Galaxy Z Flip 6 |
| Landscape width (CSS px) | 880 px | 780 px | +100 px for the Galaxy Z Flip 6 |
| Visible height, landscape | ~280 px | ~280 px | same |
| First released | 2023 | 2022 | 1 year apart |
| Engine in MobileCheck | Chromium (Chrome) | Chromium (Chrome) | same engine |
CSS px are the units media queries see. Visible heights subtract the status bar and the 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
Both lay pages out 360 CSS px wide, so every width-based media query, vw unit and percentage resolves exactly the same in portrait. Your layout breaks, or doesn't, at the same points on both; only the height differs.
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 1080 px on both to look sharp.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 1080w file on the Galaxy Z Flip 6 and the same one on the Galaxy S24.
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 784 px of the page is visible on the Galaxy Z Flip 6 and 684 px on the Galaxy S24: 100 px less (15%) on the Galaxy S24, roughly 4 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the Galaxy Z Flip 6, it can end up below it on the Galaxy S24. 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 Galaxy Z Flip 6 is 880 px wide and the Galaxy S24 780 px; (min-width: 840px) matches only the Galaxy Z Flip 6 in landscape. The visible height drops to about 280 px on both, so a 64 px sticky header covers 23% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Same browser engine
Both run Android, so both render with Chromium, the engine behind Chrome. Engine quirks are the same; the differences above come from size alone. See how to test a website on Android.
More about these devices
- Galaxy Z Flip 6 viewport size — one screen for the Galaxy Z Flip 5 / 6
- Galaxy S24 viewport size — one screen for the Samsung Galaxy S22 / S23 / S24 / S25
Or open the free check with the Galaxy Z Flip 6 and the Galaxy S24 preselected: full-page screenshots in 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 Galaxy S24 — 393 vs 360 px wide, 3× vs 3×
- iPhone Air vs Galaxy S25 — 420 vs 360 px wide, 3× vs 3×
- Galaxy Z Flip 6 vs iPhone 16 Pro — 360 vs 402 px wide, 3× vs 3×
- Galaxy S24 vs Galaxy S24 Ultra — 360 vs 384 px wide, 3× vs 2.813×
- Galaxy S25 vs Pixel 9 — 360 vs 412 px wide, 3× vs 2.625×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the Galaxy Z Flip 6 screen bigger than the Galaxy S24?
In CSS pixels, which decide how much of a page fits, the Galaxy Z Flip 6 is larger: 360 × 880 against 360 × 780. The Galaxy Z Flip 6 has more physical pixels (1080 × 2640), which makes it sharper rather than roomier.
Do I need different CSS for the Galaxy Z Flip 6 and the Galaxy S24?
Not for width: both are 360 CSS px wide, so the same media queries apply in portrait. Check above-the-fold content instead: about 784 vs 684 px is visible on first load.
How much of a web page is visible on the Galaxy Z Flip 6 vs the Galaxy S24?
About 360 × 784 CSS px on the Galaxy Z Flip 6 and 360 × 684 on the Galaxy S24 when a page first opens in portrait, after the status bar and Chrome on Android's bars. Bar heights are our device profiles' estimates.