Galaxy Z Flip 6 vs iPhone 16 Pro: 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 iPhone 16 Pro at 402 × 874 with 3. The iPhone 16 Pro is 42 px wider, and the Galaxy Z Flip 6 is 6 px taller.
The two screens side by side
Specs compared
| Spec | Galaxy Z Flip 6 | iPhone 16 Pro | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 360 × 880 | 402 × 874 | −42 px wide, +6 px tall |
| Device pixel ratio | 3 | 3 | same |
| Physical resolution | 1080 × 2640 | 1206 × 2622 | iPhone 16 Pro: 11% 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 | 874 px | +6 px for the Galaxy Z Flip 6 |
| Visible height, landscape | ~280 px | ~352 px | −72 px for the Galaxy Z Flip 6 |
| First released | 2023 | 2024 | 1 year apart |
| Engine in MobileCheck | Chromium (Chrome) | WebKit (Safari) | different engines |
CSS px are the units media queries see. Visible heights subtract the status bar and the Chrome on Android and Safari on iOS 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 42 CSS px wider (402 vs 360, 12% 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 16 Pro but not the Galaxy Z Flip 6, 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 156 px on the Galaxy Z Flip 6. 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 1080 px on the Galaxy Z Flip 6 and 1206 px on the iPhone 16 Pro 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 1290w file on the iPhone 16 Pro. Leave out the 1290w candidate and the iPhone 16 Pro 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 784 px of the page is visible on the Galaxy Z Flip 6 and 684 px on the iPhone 16 Pro: 100 px less (15%) on the iPhone 16 Pro, 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 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.
Relative to its width, the Galaxy Z Flip 6 has the taller screen (22:9 vs 19.5:9), so the same content is laid out narrower but more of its length fits at once.
In landscape
Turned sideways, the Galaxy Z Flip 6 is 880 px wide and the iPhone 16 Pro 874 px. The visible height drops to about 280 and 352 px, so a 64 px sticky header covers 23% and 18% 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 Z Flip 6 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
- Galaxy Z Flip 6 viewport size — one screen for the Galaxy Z Flip 5 / 6
- iPhone 16 Pro viewport size — one screen for the iPhone 16 Pro / 17 / 17 Pro
Or open the free check with the Galaxy Z Flip 6 and the iPhone 16 Pro 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 vs Pixel 9 — 402 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×
- iPhone 16 vs iPhone 17 — 393 vs 402 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the Galaxy Z Flip 6 screen bigger than the iPhone 16 Pro?
In CSS pixels, which decide how much of a page fits, the iPhone 16 Pro is larger: 402 × 874 against 360 × 880. The iPhone 16 Pro has more physical pixels (1206 × 2622), which makes it sharper rather than roomier.
Do I need different CSS for the Galaxy Z Flip 6 and the iPhone 16 Pro?
Only if your breakpoints fall between 360 and 402 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 Galaxy Z Flip 6 vs the iPhone 16 Pro?
About 360 × 784 CSS px on the Galaxy Z Flip 6 and 402 × 684 on the iPhone 16 Pro when a page first opens in portrait, after the status bar and the browser's bars. Bar heights are our device profiles' estimates.