iPhone SE vs iPhone 13 mini: screen size and viewport
The iPhone SE lays web pages out at 375 × 667 CSS px with a pixel ratio of 2; the iPhone 13 mini at 375 × 812 with 3. They are the same width, and the iPhone 13 mini is 145 px taller.
The two screens side by side
Specs compared
| Spec | iPhone SE | iPhone 13 mini | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 375 × 667 | 375 × 812 | same width, −145 px tall |
| Device pixel ratio | 2 | 3 | −1 for the iPhone SE |
| Physical resolution | 750 × 1334 | 1125 × 2436 | iPhone 13 mini: 174% more pixels |
| Aspect ratio | 16:9 | 19.5:9 | iPhone 13 mini is taller |
| Visible height, portrait, with browser bars | ~559 px | ~635 px | −76 px for the iPhone SE |
| Landscape width (CSS px) | 667 px | 812 px | −145 px for the iPhone SE |
| Visible height, landscape | ~325 px | ~325 px | same |
| 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
Both lay pages out 375 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 13 mini has the denser screen: 3× against 2×. A full-width image (sizes="100vw") needs about 1125 px on the iPhone 13 mini and 750 px on the iPhone SE to look sharp.
With a srcset such as 640w, 828w, 1080w, 1290w, 1440w, 1640w, 2048w, the browser would normally pick the 828w file on the iPhone SE and the 1290w file on the iPhone 13 mini. Leave out the 1290w candidate and the iPhone 13 mini upscales a smaller file.
How much fits above the fold
On first load about 635 px of the page is visible on the iPhone 13 mini and 559 px on the iPhone SE: 76 px less (14%) on the iPhone SE, 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 13 mini, it can end up below it on the iPhone SE. Keep the headline and the main action within the first 559 px, and size full-screen sections with 100svh rather than 100vh — see the 100vh problem on mobile.
In landscape
Turned sideways, the iPhone SE is 667 px wide and the iPhone 13 mini 812 px; (min-width: 768px) matches only the iPhone 13 mini in landscape. The visible height drops to about 325 px on both, so a 64 px sticky header covers 20% 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 SE viewport size — one screen for the iPhone SE (2nd/3rd gen) / 7 / 8
- iPhone 13 mini viewport size — one screen for the iPhone 12 / 13 mini / X / XS / 11 Pro
Or open the free check with the iPhone SE and the iPhone 13 mini preselected: full-page screenshots in WebKit, with problems such as small text and crowded buttons highlighted.
Related comparisons
- iPhone SE vs Galaxy A15 — 375 vs 384 px wide, 2× vs 2.813×
- iPhone 11 Pro vs iPhone 15 Pro — 375 vs 393 px wide, 3× vs 3×
- iPhone SE vs iPhone 16e — 375 vs 390 px wide, 2× vs 3×
- iPhone 13 mini vs iPhone 13 — 375 vs 390 px wide, 3× vs 3×
Compare other devices → · All mobile viewport sizes →
Frequently asked questions
Is the iPhone SE screen bigger than the iPhone 13 mini?
In CSS pixels, which decide how much of a page fits, the iPhone 13 mini is larger: 375 × 812 against 375 × 667. The iPhone 13 mini has more physical pixels (1125 × 2436), which makes it sharper rather than roomier.
Do I need different CSS for the iPhone SE and the iPhone 13 mini?
Not for width: both are 375 CSS px wide, so the same media queries apply in portrait. Check above-the-fold content instead: about 559 vs 635 px is visible on first load.
How much of a web page is visible on the iPhone SE vs the iPhone 13 mini?
About 375 × 559 CSS px on the iPhone SE and 375 × 635 on the iPhone 13 mini when a page first opens in portrait, after the status bar and Safari on iOS's bars. Bar heights are our device profiles' estimates.