6 appareils · Smartphones
Appareils Xiaomi : viewport CSS, densité et résolution d'écran
Les caractéristiques d'affichage des 6 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. 2 de ces appareils se testent directement dans votre navigateur.
Smartphones Xiaomi
2 largeurs CSS distinctes couvrent toute la gamme : 360 et 393 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 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 |
Quelles largeurs tester en priorité
Les largeurs les plus représentées de la gamme sont 360 et 393 px. Les vérifier en premier couvre 6 des 6 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 2022 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 2 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.
- 2 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,9/5 sur 5 100 avis
1 500 000+ utilisateurs
Autres marques
Questions fréquentes
Quel est le viewport CSS le plus courant chez Xiaomi ?
393 x 873 px, partagé par 4 des 6 modèles référencés, dont Xiaomi Redmi Note 9 Pro et Xiaomi Redmi Note 7. 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 2022. Si votre mise en page tient à 360 px, elle tient sur les 6 appareils Xiaomi référencés, jusqu'au plus large qui atteint 393 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 12 2022 a une dalle de 1080 x 2400 pixels et un viewport CSS de 360 x 800 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 2 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.