iPhone 13 mini vs iPhone 13: screen size and viewport
The iPhone 13 mini lays web pages out at 375 × 812 CSS px with a pixel ratio of 3; the iPhone 13 at 390 × 844 with 3. The iPhone 13 is 15 px wider and 32 px taller.
The two screens side by side
Specs compared
| Spec | iPhone 13 mini | iPhone 13 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 375 × 812 | 390 × 844 | −15 px wide, −32 px tall |
| Device pixel ratio | 3 | 3 | same |
| Physical resolution | 1125 × 2436 | 1170 × 2532 | iPhone 13: 8% more pixels |
| Aspect ratio | 19.5:9 | 19.5:9 | about the same |
| Visible height, portrait, with browser bars | ~635 px | ~667 px | −32 px for the iPhone 13 mini |
| Landscape width (CSS px) | 812 px | 844 px | −32 px for the iPhone 13 mini |
| Visible height, landscape | ~325 px | ~340 px | −15 px for the iPhone 13 mini |
| First released | 2020 | 2020 | same year |
| 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 13 is 15 CSS px wider (390 vs 375, 4% more). One common breakpoint falls between them: (min-width: 390px) (a common phone test width) matches the iPhone 13 but not the iPhone 13 mini, 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 171 px wide on the iPhone 13 and 163 px on the iPhone 13 mini. 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 1125 px on the iPhone 13 mini and 1170 px on the iPhone 13 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 mini and the same one on the iPhone 13.
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 667 px of the page is visible on the iPhone 13 and 635 px on the iPhone 13 mini: 32 px less (5%) on the iPhone 13 mini, roughly 1 line of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the iPhone 13, it can end up below it on the iPhone 13 mini. Keep the headline and the main action within the first 635 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
In landscape
Turned sideways, the iPhone 13 mini is 812 px wide and the iPhone 13 844 px; (min-width: 840px) matches only the iPhone 13 in landscape. The visible height drops to about 325 and 340 px, so a 64 px sticky header covers 20% 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 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 mini viewport size — one screen for the iPhone 12 / 13 mini / X / XS / 11 Pro
- iPhone 13 viewport size — one screen for the iPhone 12 / 13 / 14 / 16e
Or open the free check with the iPhone 13 mini and the iPhone 13 preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone 14 vs Galaxy A54 — 390 vs 384 px wide, 3× vs 2.813×
- iPhone 14 vs iPhone 15 — 390 vs 393 px wide, 3× vs 3×
- iPhone 14 vs iPhone 14 Plus — 390 vs 428 px wide, 3× vs 3×
- iPhone 13 vs iPhone 17 — 390 vs 402 px wide, 3× vs 3×
- iPhone 11 vs iPhone 12 — 414 vs 390 px wide, 2× vs 3×
- iPhone 11 Pro vs iPhone 15 Pro — 375 vs 393 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone 13 mini screen bigger than the iPhone 13?
In CSS pixels, which decide how much of a page fits, the iPhone 13 is larger: 390 × 844 against 375 × 812. The iPhone 13 has more physical pixels (1170 × 2532), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone 13 mini and the iPhone 13?
Only if your breakpoints fall between 375 and 390 px: a min-width query at 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 iPhone 13 mini vs the iPhone 13?
About 375 × 635 CSS px on the iPhone 13 mini and 390 × 667 on the iPhone 13 when a page first opens in portrait, after the status bar and Safari on iOS's bars. Bar heights are our device profiles' estimates.