iPhone 13 vs iPhone 17: screen size and viewport
The iPhone 13 lays web pages out at 390 × 844 CSS px with a pixel ratio of 3; the iPhone 17 at 402 × 874 with 3. The iPhone 17 is 12 px wider and 30 px taller.
The two screens side by side
Specs compared
| Spec | iPhone 13 | iPhone 17 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 390 × 844 | 402 × 874 | −12 px wide, −30 px tall |
| Device pixel ratio | 3 | 3 | same |
| Physical resolution | 1170 × 2532 | 1206 × 2622 | iPhone 17: 7% more pixels |
| Aspect ratio | 19.5:9 | 19.5:9 | about the same |
| Visible height, portrait, with browser bars | ~667 px | ~684 px | −17 px for the iPhone 13 |
| Landscape width (CSS px) | 844 px | 874 px | −30 px for the iPhone 13 |
| Visible height, landscape | ~340 px | ~352 px | −12 px for the iPhone 13 |
| First released | 2020 | 2024 | 4 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 17 is 12 CSS px wider (402 vs 390, 3% more). No common breakpoint falls between 390 and 402 px, so with typical media queries both get the same layout and the extra 12 pixels only stretch fluid columns, text lines and images.
In a 2-column card grid with 16 px page padding and 16 px gaps, each card is 177 px wide on the iPhone 17 and 171 px on the iPhone 13. 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 1170 px on the iPhone 13 and 1206 px on the iPhone 17 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 13 and the same one on the iPhone 17.
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 iPhone 17 and 667 px on the iPhone 13: 17 px less (3%) on the iPhone 13. That's less than one line of body text, so in practice both show the same first screen.
In landscape
Turned sideways, the iPhone 13 is 844 px wide and the iPhone 17 874 px. The visible height drops to about 340 and 352 px, so a 64 px sticky header covers 19% and 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 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 13 viewport size — one screen for the iPhone 12 / 13 / 14 / 16e
- iPhone 17 viewport size — one screen for the iPhone 16 Pro / 17 / 17 Pro
Or open the free check with the iPhone 13 and the iPhone 17 preselected: full-page screenshots in WebKit, 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 14 vs Galaxy A54 — 390 vs 384 px wide, 3× vs 2.813×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 13 screen bigger than the iPhone 17?
In CSS pixels, which decide how much of a page fits, the iPhone 17 is larger: 402 × 874 against 390 × 844. The iPhone 17 has more physical pixels (1206 × 2622), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 13 and the iPhone 17?
Usually not. No common breakpoint falls between their widths (390 and 402 px), so a fluid layout gets the same rules on both and only stretches by 12 px.
How much of a web page is visible on the iPhone 13 vs the iPhone 17?
About 390 × 667 CSS px on the iPhone 13 and 402 × 684 on the iPhone 17 when a page first opens in portrait, after the status bar and Safari on iOS's bars. Bar heights are our device profiles' estimates.