Xiaomi 13 vs iPhone 15: screen size and viewport
The Xiaomi 13 lays web pages out at 393 × 873 CSS px with a pixel ratio of 2.75; the iPhone 15 at 393 × 852 with 3. They are the same width, and the Xiaomi 13 is 21 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 | Xiaomi 13 | iPhone 15 | Difference |
|---|---|---|---|
| Viewport, portrait (CSS px) | 393 × 873 | 393 × 852 | same width, +21 px tall |
| Device pixel ratio | 2.75 | 3 | −0.25 for the Xiaomi 13 |
| Physical resolution | 1081 × 2401 | 1179 × 2556 | iPhone 15: 16% more pixels |
| Aspect ratio | 20:9 | 19.5:9 | Xiaomi 13 is taller |
| Visible height, portrait, with browser bars | ~777 px | ~662 px | +115 px for the Xiaomi 13 |
| Landscape width (CSS px) | 873 px | 852 px | +21 px for the Xiaomi 13 |
| Visible height, landscape | ~313 px | ~343 px | −30 px for the Xiaomi 13 |
| First released | 2022 | 2022 | same year |
| Engine in MobileCheck | Chromium (Chrome) | WebKit (Safari) | different engines |
CSS px are the units media queries see. Visible heights subtract the status bar and the Chrome on Android and 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 393 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 15 has the denser screen: 3× against 2.75×. A full-width image (sizes="100vw") needs about 1179 px on the iPhone 15 and 1081 px on the Xiaomi 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 Xiaomi 13 and the same one on the iPhone 15.
The Xiaomi 13's ratio of 2.75 is fractional: one CSS pixel isn't a whole number of device pixels, so 1 px borders and hairlines can be rounded unevenly. Check thin lines on that screen rather than assuming they match.
How much fits above the fold
On first load about 777 px of the page is visible on the Xiaomi 13 and 662 px on the iPhone 15: 115 px less (17%) on the iPhone 15, roughly 4 lines of 16 px body text at a 1.5 line height.
If your main button sits just above the fold on the Xiaomi 13, 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 Xiaomi 13 is 873 px wide and the iPhone 15 852 px. The visible height drops to about 313 and 343 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.
Different browser engines
The iPhone 15 renders with WebKit (Safari's engine) and the Xiaomi 13 with Chromium (Chrome's), so fonts, form controls and some CSS can differ on top of the size difference. Chrome DevTools draws every emulated device with Chromium, which hides WebKit-only problems — see how to test on an iPhone and on Android.
More about these devices
- Xiaomi 13 viewport size — one screen for the Xiaomi Redmi Note 11 / 12 / 13 / Xiaomi 13
- iPhone 15 viewport size — one screen for the iPhone 14 Pro / 15 / 15 Pro / 16
Or open the free check with the Xiaomi 13 and the iPhone 15 preselected: full-page screenshots in WebKit and Chromium, 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×
- 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×
- 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 Xiaomi 13 screen bigger than the iPhone 15?
In CSS pixels, which decide how much of a page fits, the Xiaomi 13 is larger: 393 × 873 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 Xiaomi 13 and the iPhone 15?
Not for width: both are 393 CSS px wide, so the same media queries apply in portrait. Check above-the-fold content instead: about 777 vs 662 px is visible on first load.
How much of a web page is visible on the Xiaomi 13 vs the iPhone 15?
About 393 × 777 CSS px on the Xiaomi 13 and 393 × 662 on the iPhone 15 when a page first opens in portrait, after the status bar and the browser's bars. Bar heights are our device profiles' estimates.