iPhone 11 vs iPhone 15: screen size and viewport
The iPhone 11 lays web pages out at 414 × 896 CSS px with a pixel ratio of 2; the iPhone 15 at 393 × 852 with 3. The iPhone 11 is 21 px wider and 44 px taller. The iPhone 15 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 11 | iPhone 15 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 414 × 896 | 393 × 852 | +21 px wide, +44 px tall |
| Device pixel ratio | 2 | 3 | −1 for the iPhone 11 |
| Physical resolution | 828 × 1792 | 1179 × 2556 | iPhone 15: 103% more pixels |
| Aspect ratio | 19.5:9 | 19.5:9 | about the same |
| Visible height, portrait, with browser bars | ~719 px | ~662 px | +57 px for the iPhone 11 |
| Landscape width (CSS px) | 896 px | 852 px | +44 px for the iPhone 11 |
| Visible height, landscape | ~364 px | ~343 px | +21 px for the iPhone 11 |
| First released | 2019 | 2022 | 3 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
The iPhone 11 is 21 CSS px wider (414 vs 393, 5% more). One common breakpoint falls between them: (min-width: 414px) (a common large-phone test width) matches the iPhone 11 but not the iPhone 15, 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 183 px wide on the iPhone 11 and 172 px on the iPhone 15. Check that buttons, prices and long words still fit in the narrower one.
Pixel density and image sizes
The iPhone 15 has the denser screen: 3× against 2×. A full-width image (sizes="100vw") needs about 1179 px on the iPhone 15 and 828 px on the iPhone 11 to look sharp — more on the iPhone 15 even though its viewport is narrower.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 828w file on the iPhone 11 and the 1290w file on the iPhone 15. Leave out the 1290w candidate and the iPhone 15 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 662 px on the iPhone 15: 57 px less (9%) on the iPhone 15, roughly 2 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 15. Keep the headline and the main action within the first 662 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
In landscape
Turned sideways, the iPhone 11 is 896 px wide and the iPhone 15 852 px. The visible height drops to about 364 and 343 px, so a 64 px sticky header covers 18% and 19% 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 11 viewport size — one screen for the iPhone 11 / XR
- iPhone 15 viewport size — one screen for the iPhone 14 Pro / 15 / 15 Pro / 16
Or open the free check with the iPhone 11 and the iPhone 15 preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 15 vs Galaxy S24 — 393 vs 360 px wide, 3× vs 3×
- iPhone 15 vs Pixel 8 — 393 vs 412 px wide, 3× vs 2.625×
- 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×
- iPhone 14 vs iPhone 15 — 390 vs 393 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 11 screen bigger than the iPhone 15?
In CSS pixels, which decide how much of a page fits, the iPhone 11 is larger: 414 × 896 against 393 × 852. The iPhone 15 has more physical pixels (1179 × 2556), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 11 and the iPhone 15?
Only if your breakpoints fall between 393 and 414 px: a min-width query at 414px 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 11 vs the iPhone 15?
About 414 × 719 CSS px on the iPhone 11 and 393 × 662 on the iPhone 15 when a page first opens in portrait, after the status bar and Safari on iOS's bars. Bar heights are our device profiles' estimates.