11 devices · Smartphones
Xiaomi devices: CSS viewport, density, and screen resolution
Display characteristics of 11 referenced Xiaomi devices, each with the width your media queries respond to, its pixel density, and panel resolution. 7 of these devices can be tested directly in your browser.
Xiaomi Smartphones
6 distinct CSS widths cover the entire range: 360, 393, 400, 406, 423 and 427 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 17T | 423 × 919 | 3x | 1268 × 2756 | 6.6" | 2026 |
| Xiaomi 17T Pro | 427 × 924 | 3x | 1280 × 2772 | 6.8" | 2026 |
| Xiaomi Redmi Note 17 | 393 × 871 | 2.75x | 1080 × 2396 | 7" | 2026 |
| Xiaomi 17 | 406 × 885 | 3x | 1220 × 2656 | 6.3" | 2025 |
| Xiaomi 17 Ultra | 400 × 869 | 3x | 1200 × 2608 | 6.9" | 2025 |
| Xiaomi 12 | 360 × 800 | 3x | 1080 × 2400 | 6.7" | 2021 |
| 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, 393, 400 and 406 px. Checking them first covers 9 of the 11 referenced Xiaomi models, and these should be your first breakpoints.
Go down to 360 px to cover the entire range, including Xiaomi 12: 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 7 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.
- 7 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.93/5 on 5,100 reviews
1,600,000+ users
Other brands
Frequently asked questions
What is the most common CSS viewport for Xiaomi?
393 x 871 px, shared by 5 of the 11 referenced models, including Xiaomi Redmi Note 17 and Xiaomi Redmi Note 9 Pro. 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. If your layout fits at 360 px, it fits on the 11 Xiaomi devices listed, up to the widest which reaches 427 px.
Why does the resolution announced by Xiaomi not match the CSS viewport?
Because these screens display multiple physical pixels per CSS pixel. Xiaomi 17T has a panel of 1268 x 2756 pixels and a CSS viewport of 423 x 919 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 7 of these models, directly in your browser, including on a localhost address.
The mentioned brands and models belong to their respective owners.