9 dispositivos · Smartphones
Dispositivos Huawei: viewport CSS, densidade e resolução de tela
As características de exibição dos 9 dispositivos Huawei referenciados, com a largura na qual suas media queries ressoam, sua densidade de pixel e a resolução de sua tela. 1 desses dispositivos podem ser testados diretamente no seu navegador.
Smartphones Huawei
2 larguras CSS distintas cobrem toda a gama: 360 e 392 px. Vários modelos compartilham a mesma: validar um deles é suficiente para validar os outros.
| Modelo | Viewport CSS | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| 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 |
Quais larguras testar em prioridade
As larguras mais representadas da gama são 360 e 392 px. Verificá-las primeiro cobre 9 dos 9 modelos Huawei referenciados, e é sobre elas que seus primeiros breakpoints devem incidir.
Desça até 360 px para cobrir toda a gama, incluindo Huawei Nova 7i: um layout que se adapta a essa largura se adapta em qualquer lugar, inclusive nos modelos mais antigos ainda em circulação.
Atenção à altura: os navegadores móveis reduzem a área visível com suas barras de interface, e estas se retraem ao rolar. Uma altura de 100vh, portanto, transborda da primeira tela; as unidades svh e dvh são preferíveis.
Teste seu site em 1 dispositivos Huawei, sem comprar nenhum
As tabelas fornecem as medidas. A extensão exibe seu site no viewport exato do modelo, com sua densidade, seu User-Agent e a alternância entre retrato e paisagem.
- 1 dispositivos Huawei prontos para uso, desde modelos antigos até os lançamentos do ano
- Capturas e vídeos exportados no formato do dispositivo
- Funciona nos seus ambientes locais e suas pré-produções
Grátis · 4,9/5 em 5.100 avaliações
1.500.000+ usuários
Outras marcas
Perguntas frequentes
Qual é o viewport CSS mais comum na Huawei?
360 x 770 px, compartilhado por 8 dos 9 modelos referenciados, incluindo Huawei Nova 7i e Huawei Mate 30. É a largura a verificar primeiro nesta gama.
Qual largura mínima testar para cobrir os dispositivos Huawei?
360 px, a largura do modelo mais estreito da lista, Huawei Nova 7i. Se o seu layout cabe em 360 px, ele cabe nos 9 dispositivos Huawei referenciados, até o mais largo que atinge 392 px.
Por que a resolução anunciada pela Huawei não corresponde ao viewport CSS?
Porque essas telas exibem vários pixels físicos por pixel CSS. Huawei Nova 7i tem uma tela de 1080 x 2310 pixels e um viewport CSS de 360 x 770 px, com uma densidade de 3. É o segundo valor que deve ser escrito em uma media query.
Como testar seu site em um dispositivo Huawei sem ter um?
Com a extensão Mobile FIRST: ela reproduz o viewport, a densidade de pixel, o User-Agent e os eventos táteis de 1 desses modelos, diretamente no seu navegador, inclusive em um endereço localhost.
As marcas e modelos citados pertencem aos seus respectivos proprietários.