iPhone 8 Plus vs iPhone 11: screen size and viewport
The iPhone 8 Plus lays web pages out at 414 × 736 CSS px with a pixel ratio of 3; the iPhone 11 at 414 × 896 with 2. They are the same width, and the iPhone 11 is 160 px taller. The iPhone 8 Plus 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 8 Plus | iPhone 11 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 414 × 736 | 414 × 896 | same width, −160 px tall |
| Device pixel ratio | 3 | 2 | +1 for the iPhone 8 Plus |
| Physical resolution | 1242 × 2208 | 828 × 1792 | iPhone 8 Plus: 85% more pixels |
| Aspect ratio | 16:9 | 19.5:9 | iPhone 11 is taller |
| Visible height, portrait, with browser bars | ~628 px | ~719 px | −91 px for the iPhone 8 Plus |
| Landscape width (CSS px) | 736 px | 896 px | −160 px for the iPhone 8 Plus |
| Visible height, landscape | ~364 px | ~364 px | same |
| First released | 2017 | 2019 | 2 years apart |
| Engine in MobileCheck | WebKit (Safari) | WebKit (Safari) | same engine |
CSS px are the units media queries see. Visible heights subtract the status bar and the 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
Both lay pages out 414 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 and the pixel density differ.
Pixel density and image sizes
The iPhone 8 Plus has the denser screen: 3× against 2×. A full-width image (sizes="100vw") needs about 1242 px on the iPhone 8 Plus and 828 px on the iPhone 11 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 8 Plus and the 828w file on the iPhone 11. Leave out the 1290w candidate and the iPhone 8 Plus upscales a smaller file.
How much fits above the fold
On first load about 719 px of the page is visible on the iPhone 11 and 628 px on the iPhone 8 Plus: 91 px less (14%) on the iPhone 8 Plus, roughly 3 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the iPhone 11, it can end up below it on the iPhone 8 Plus. Keep the headline and the main action within the first 628 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
In landscape
Turned sideways, the iPhone 8 Plus is 736 px wide and the iPhone 11 896 px; (min-width: 768px), (min-width: 840px) match only the iPhone 11 in landscape. The visible height drops to about 364 px on both, so a 64 px sticky header covers 18% of the screen — under the 25% at which MobileCheck flags fixed bars covering the page.
Same browser engine
Both are Apple devices, so both render with WebKit, the engine behind Safari. Engine quirks are the same; the differences above come from size and density alone. Chrome DevTools only emulates the size and still draws with Chromium, so check Apple devices in a WebKit browser — see how to test on an iPhone.
More about these devices
- iPhone 8 Plus viewport size — one screen for the iPhone 8 Plus / 7 Plus
- iPhone 11 viewport size — one screen for the iPhone 11 / XR
Or open the free check with the iPhone 8 Plus and the iPhone 11 preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 11 vs iPhone 12 — 414 vs 390 px wide, 2× vs 3×
- iPhone 11 vs iPhone 15 — 414 vs 393 px wide, 2× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 8 Plus screen bigger than the iPhone 11?
In CSS pixels, which decide how much of a page fits, the iPhone 11 is larger: 414 × 896 against 414 × 736. The iPhone 8 Plus has more physical pixels (1242 × 2208), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 8 Plus and the iPhone 11?
Not for width: both are 414 CSS px wide, so the same media queries apply in portrait. Check above-the-fold content instead: about 628 vs 719 px is visible on first load.
How much of a web page is visible on the iPhone 8 Plus vs the iPhone 11?
About 414 × 628 CSS px on the iPhone 8 Plus and 414 × 719 on the iPhone 11 when a page first opens in portrait, after the status bar and Safari on iOS's bars. Bar heights are our device profiles' estimates.