9 appareils · Smartphones
Appareils Huawei : viewport CSS, densité et résolution d'écran
Les caractéristiques d'affichage des 9 appareils Huawei 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. 1 de ces appareils se testent directement dans votre navigateur.
Smartphones Huawei
2 largeurs CSS distinctes couvrent toute la gamme : 360 et 392 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 |
|---|---|---|---|---|---|
| Huawei Nova 7i | 360 × 770 | 3x | 1080 × 2310 | 6,4" | 2020 |
| Huawei Mate 30 | 360 × 780 | 3x | 1080 × 2340 | 6,6" | 2019 |
| Huawei Mate 30 Pro | 392 × 800 | 3x | 1176 × 2400 | 6,5" | 2019 |
| Huawei P30 PRO | 360 × 780 | 3x | 1080 × 2340 | 6,5" | 2019 |
| Huawei Y9 Prime | 360 × 780 | 3x | 1080 × 2340 | 6,6" | 2019 |
| Huawei Y9s | 360 × 780 | 3x | 1080 × 2340 | 6,6" | 2019 |
| Huawei Mate 20 Lite | 360 × 780 | 3x | 1080 × 2340 | 6,3" | 2018 |
| Huawei Mate 20 Pro | 360 × 780 | 4x | 1440 × 3120 | 6,4" | 2018 |
| Huawei Mate 10 Lite | 360 × 720 | 3x | 1080 × 2160 | 5,9" | 2017 |
Quelles largeurs tester en priorité
Les largeurs les plus représentées de la gamme sont 360 et 392 px. Les vérifier en premier couvre 9 des 9 modèles Huawei 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, Huawei Nova 7i 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 1 appareils Huawei, 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.
- 1 appareils Huawei 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 Huawei ?
360 x 770 px, partagé par 8 des 9 modèles référencés, dont Huawei Nova 7i et Huawei Mate 30. C'est la largeur à vérifier en premier sur cette gamme.
Quelle largeur minimale tester pour couvrir les appareils Huawei ?
360 px, la largeur du modèle le plus étroit de la liste, Huawei Nova 7i. Si votre mise en page tient à 360 px, elle tient sur les 9 appareils Huawei référencés, jusqu'au plus large qui atteint 392 px.
Pourquoi la résolution annoncée par Huawei ne correspond pas au viewport CSS ?
Parce que ces écrans affichent plusieurs pixels physiques par pixel CSS. Huawei Nova 7i a une dalle de 1080 x 2310 pixels et un viewport CSS de 360 x 770 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 Huawei 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 1 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.