6 devices · Smartphones
Xiaomi devices: CSS viewport, density, and screen resolution
Display characteristics of 6 referenced Xiaomi devices, each with the width your media queries respond to, its pixel density, and panel resolution. 2 of these devices can be tested directly in your browser.
Xiaomi Smartphones
2 distinct CSS widths cover the entire range: 360 and 393 px. Several models share the same: validating one of them is enough to validate the others.
| Model | CSS Viewport | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| Xiaomi 12 2022 | 360 × 800 | 3x | 1080 × 2400 | 6.7" | 2022 |
| Xiaomi Mi 11i | 360 × 800 | 3x | 1080 × 2400 | 6.7" | 2021 |
| Xiaomi Redmi Note 9 Pro | 393 × 873 | 2.75x | 1080 × 2400 | 6.7" | 2020 |
| Xiaomi Redmi Note 7 | 393 × 851 | 2.75x | 1080 × 2340 | 6.3" | 2019 |
| Xiaomi Redmi Note 8 | 393 × 851 | 2.75x | 1080 × 2340 | 6.3" | 2019 |
| Xiaomi Redmi Note 8 Pro | 393 × 851 | 2.75x | 1080 × 2340 | 6.5" | 2019 |
Which widths to test first
The most represented widths in the range are 360 and 393 px. Checking them first covers 6 of the 6 referenced Xiaomi models, and these should be your first breakpoints.
Go down to 360 px to cover the entire range, including Xiaomi 12 2022: a layout that fits this width fits everywhere, including the oldest models still in circulation.
Watch out for height: mobile browsers reduce the visible area with their interface bars, and these retract when scrolling. A height of 100vh therefore overflows the first screen; svh and dvh units are preferable.
Test your site on 2 Xiaomi devices, without buying a single one
The tables provide measurements. The extension displays your site at the model's exact viewport, with its density, User-Agent, and portrait or landscape switching.
- 2 Xiaomi devices ready to use, from older models to this year's releases
- Screenshots and videos exported in the device's format
- Works on your local environments and pre-productions
Free · 4.9/5 on 5,100 reviews
1,500,000+ users
Other brands
Frequently asked questions
What is the most common CSS viewport for Xiaomi?
393 x 873 px, shared by 4 of the 6 referenced models, including Xiaomi Redmi Note 9 Pro and Xiaomi Redmi Note 7. This is the width to check first in this range.
What minimum width to test to cover Xiaomi devices?
360 px, the width of the narrowest model in the list, Xiaomi 12 2022. If your layout fits at 360 px, it fits on the 6 Xiaomi devices listed, up to the widest which reaches 393 px.
Why does the resolution announced by Xiaomi not match the CSS viewport?
Because these screens display multiple physical pixels per CSS pixel. Xiaomi 12 2022 has a panel of 1080 x 2400 pixels and a CSS viewport of 360 x 800 px, with a density of 3. It's the second value that should be written in a media query.
How to test your site on a Xiaomi device without having one?
With the Mobile FIRST extension: it replicates the viewport, pixel density, User-Agent, and touch events of 2 of these models, directly in your browser, including on a localhost address.
The mentioned brands and models belong to their respective owners.