11 appareils · Smartphones
Appareils Xiaomi : viewport CSS, densité et résolution d'écran
Les caractéristiques d'affichage des 11 appareils Xiaomi référencés, avec pour chacun la largeur sur laquelle raisonnent vos media queries, sa densité de pixel et la résolution de sa dalle. 7 de ces appareils se testent directement dans votre navigateur.
Smartphones Xiaomi
6 largeurs CSS distinctes couvrent toute la gamme : 360, 393, 400, 406, 423 et 427 px. Plusieurs modèles partagent la même : valider l'un d'eux suffit à valider les autres.
| Modèle | Viewport CSS | Densité | Résolution dalle | Diagonale | Année |
|---|---|---|---|---|---|
| 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 |
Quelles largeurs tester en priorité
Les largeurs les plus représentées de la gamme sont 360, 393, 400 et 406 px. Les vérifier en premier couvre 9 des 11 modèles Xiaomi référencés, et c'est sur elles que doivent tomber vos premiers points de rupture.
Descendez jusqu'à 360 px pour couvrir la gamme entière, Xiaomi 12 comprise : une mise en page qui tient à cette largeur tient partout, y compris sur les modèles les plus anciens encore en circulation.
Attention à la hauteur : les navigateurs mobiles réduisent la zone visible avec leurs barres d'interface, et celles-ci se rétractent au défilement. Une hauteur en 100vh déborde donc du premier écran ; les unités svh et dvh sont préférables.
Testez votre site sur 7 appareils Xiaomi, sans en acheter un seul
Les tableaux donnent les mesures. L'extension affiche votre site au viewport exact du modèle, avec sa densité, son User-Agent et le basculement portrait ou paysage.
- 7 appareils Xiaomi prêts à l'emploi, des modèles anciens aux sorties de l'année
- Captures et vidéos exportées au format de l'appareil
- Fonctionne sur vos environnements locaux et vos préproductions
Gratuit · 4,93/5 sur 5 100 avis
1 600 000+ utilisateurs
Autres marques
Questions fréquentes
Quel est le viewport CSS le plus courant chez Xiaomi ?
393 x 871 px, partagé par 5 des 11 modèles référencés, dont Xiaomi Redmi Note 17 et Xiaomi Redmi Note 9 Pro. C'est la largeur à vérifier en premier sur cette gamme.
Quelle largeur minimale tester pour couvrir les appareils Xiaomi ?
360 px, la largeur du modèle le plus étroit de la liste, Xiaomi 12. Si votre mise en page tient à 360 px, elle tient sur les 11 appareils Xiaomi référencés, jusqu'au plus large qui atteint 427 px.
Pourquoi la résolution annoncée par Xiaomi ne correspond pas au viewport CSS ?
Parce que ces écrans affichent plusieurs pixels physiques par pixel CSS. Xiaomi 17T a une dalle de 1268 x 2756 pixels et un viewport CSS de 423 x 919 px, soit une densité de 3. C'est la seconde valeur qu'il faut écrire dans une media query.
Comment tester son site sur un appareil Xiaomi sans en avoir un ?
Avec l'extension Mobile FIRST : elle reproduit le viewport, la densité de pixel, le User-Agent et les événements tactiles de 7 de ces modèles, directement dans votre navigateur, y compris sur une adresse en localhost.
Les marques et modèles cités appartiennent à leurs propriétaires respectifs.