9 dispositivos · Smartphones

Dispositivos Huawei: viewport CSS, densidad y resolución de pantalla

Las características de visualización de los 9 dispositivos Huawei referenciados, con para cada uno el ancho sobre el cual resuenan tus media queries, su densidad de píxel y la resolución de su pantalla. 1 de estos dispositivos se prueban directamente en tu navegador.

Smartphones Huawei

9 modelos · 2017 → 2020

2 anchos CSS distintos cubren toda la gama: 360 y 392 px. Varios modelos comparten el mismo: validar uno de ellos es suficiente para validar los demás.

Viewport CSS, densidad de píxel, resolución y diagonal de los dispositivos Huawei
Modelo Viewport CSS Densidad Resolución de pantalla Diagonal Año
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

Qué anchos probar en prioridad

Los anchos más representados de la gama son 360 y 392 px. Verificarlos primero cubre 9 de los 9 modelos Huawei referenciados, y es sobre ellos que deben caer tus primeros puntos de ruptura.

Descienda hasta 360 px para cubrir toda la gama, incluido Huawei Nova 7i: un diseño que se ajusta a este ancho se ajusta en todas partes, incluidos los modelos más antiguos aún en circulación.

Atención a la altura: los navegadores móviles reducen el área visible con sus barras de interfaz, y estas se retraen al desplazarse. Una altura en 100vh desborda por lo tanto de la primera pantalla; las unidades svh y dvh son preferibles.

Prueba tu sitio en 1 dispositivos Huawei, sin comprar ni uno solo

Las tablas dan las medidas. La extensión muestra tu sitio en el viewport exacto del modelo, con su densidad, su User-Agent y el cambio de retrato a paisaje.

  • 1 dispositivos Huawei listos para usar, desde modelos antiguos hasta lanzamientos del año
  • Capturas y videos exportados en el formato del dispositivo
  • Funciona en sus entornos locales y sus preproducciones

Gratis · 4,9/5 sobre 5100 opiniones
1.500.000+ usuarios

Preguntas frecuentes

¿Cuál es el viewport CSS más común en Huawei ?

360 x 770 px, compartido por 8 de los 9 modelos referenciados, incluyendo Huawei Nova 7i y Huawei Mate 30. Es el ancho a verificar primero en esta gama.

¿Qué ancho mínimo probar para cubrir los dispositivos Huawei ?

360 px, el ancho del modelo más estrecho de la lista, Huawei Nova 7i. Si su diseño se ajusta a 360 px, se ajusta a los 9 dispositivos Huawei referenciados, hasta el más ancho que alcanza 392 px.

¿Por qué la resolución anunciada por Huawei no corresponde al viewport CSS?

Porque estas pantallas muestran varios píxeles físicos por píxel CSS. Huawei Nova 7i tiene una pantalla de 1080 x 2310 píxeles y un viewport CSS de 360 x 770 px, es decir, una densidad de 3. Es el segundo valor que se debe escribir en una media query.

¿Cómo probar su sitio en un dispositivo Huawei sin tener uno?

Con la extensión Mobile FIRST: reproduce el viewport, la densidad de píxel, el User-Agent y los eventos táctiles de 1 de estos modelos, directamente en su navegador, incluso en una dirección en localhost.

Las marcas y modelos mencionados pertenecen a sus respectivos propietarios.