Tamaño de pantalla móvil y tableta (iPhone, iPad, galaxia, etc. ), Clasifique los tamaños de pantalla de los dispositivos iOS – cree una aplicación receptiva con UIKIT para iOS – OpenClassrooms

Cree una aplicación receptiva con UIKIT para iOS

iPhone 6+, 6s+, 7+, 8+

Tamaño de pantalla móvil y tableta

El tamaño y la resolución de la pantalla son dos características esenciales a tener en cuenta al elegir un teléfono inteligente o tableta. La siguiente ilustración le permite Compare visualmente órdenes de magnitud (Diagonales en titular y cm) de los tamaños de pantalla más comunes de los dispositivos portátiles.

Comparación de tamaños D

Para los teléfonos inteligentes en particular, las pantallas de dispositivos portátiles son generalmente cada vez más grandes. Este aumento de tamaño tiene sus ventajas pero también sus desventajas:

  • Comodidad en uso
    Cuanto más grande sea la pantalla, más cómodo será usar aplicaciones, navegar por la web o ver películas y series. Las teclas en el teclado virtual también serán más grandes.
  • Transportabilidad y maniobrabilidad
    Un dispositivo con una pantalla grande será más voluminoso y menos útil, especialmente para los teléfonos inteligentes para los que con frecuencia será necesario usar ambas manos para alcanzar ciertas partes de la pantalla táctil.

En paralelo con el tamaño, el relación Las pantallas (relación de altura/ancho) también han evolucionado con el tiempo. Este desarrollo se debe principalmente a la democratización de los teléfonos móviles “sin fronteras”, es decir sin fronteras o botones de recepción.

Proporciones D

La pantalla es más grande pero también es más alargada (y con esquinas redondeadas). El formato aumentó gradualmente del clásico 16/9 a un promedio de 19.5/9. También notará que en muchos modelos (iPhone en particular), parte de la superficie de la pantalla es de mordisco en la parte superior por una muesca (la “muesca”) que incluye sensores, el altavoz y la cámara frontal.

Tamaño del teléfono inteligente

Las secciones a continuación tienen un Panel Representante de tamaños de pantalla Los modelos iOS y Android más populares (Apple iPhone y Samsung Galaxy rangos en particular).

Especificaciones de pantalla de los modelos principales

Longitud diagonal de las pantallas móviles de Apple

Tamaño de las pantallas móviles de Apple

Por simplicidad, la muesca superior (muesca) se ha representado de manera idéntica en cada visual, pero puede ser diferente dependiendo de las versiones (12, 13, 14, max, pro, más, etc.)).

Modelo Tamaño (pulgada) Tamaño (CM) Definición (píxeles) Resolución (PPP)
iphone 6 4.7 “ 11.9 cm 1334 x 750 PX 326 pp
iPhone 6s 4.7 “ 11.9 cm 1334 x 750 PX 326 pp
iPhone 7 4.7 “ 11.9 cm 1334 x 750 PX 326 pp
iPhone 8 4.7 “ 11.9 cm 1334 x 750 PX 326 pp
iPhone 6 Plus 5.5 “ 14 cm 1920 x 1080 PX 401 PPI
iPhone 6s Plus 5.5 “ 14 cm 1920 x 1080 PX 401 PPI
iPhone 7 Plus 5.5 “ 14 cm 1920 x 1080 PX 401 PPI
iPhone 8 Plus 5.5 “ 14 cm 1920 x 1080 PX 401 PPI
iPhone X 5.8 “ 14.7 cm 2436 x 1125 PX 458 PPI
iPhone XS 5.8 “ 14.7 cm 2436 x 1125 PX 458 PPI
iPhone 11 Pro 5.8 “ 14.7 cm 2436 x 1125 PX 458 PPI
iPhone XR 6.1 “ 15.5 cm 1792 x 828 PX 326 pp
iPhone 11 6.1 “ 15.5 cm 1792 x 828 PX 326 pp
iPhone XS Max 6.5 “ 16.5 cm 2688 x 1242 PX 458 PPI
iPhone 11 Pro Max 6.5 “ 16.5 cm 2688 x 1242 PX 458 PPI
iPhone 12/13 (mini) 5.4 “ 13.7 cm 2340 x 1080 PX 476 PPP
iPhone 12/13 (pro y estándar) / 14 6.1 “ 15.5 cm 2352 x 1170 PX 460 PPI
iPhone 14 Pro 6.1 “ 15.5 cm 2556 x 1179 PX 460 PPI
iPhone 12/13 (Pro Max) / 14 Plus 6.7 “ 17 cm 2778 x 1284 PX 458 PPI
iPhone 14 Pro Max 6.7 “ 17 cm 2796 x 1290 PX 460 PPI

La longitud indicada corresponde a la diagonal (en pulgadas y cm).

El diagrama y la tabla de arriba ilustran claramente la tendencia de expandir los tamaños de pantalla móvil con el tiempo. Además, para una comparación más detallada de los diferentes modelos, también puede usar el comparador de iPhone (en el sitio de Apple).

Con criterios de filtrado (sitio de Baker)
¿Qué es la resolución PPP? ?

se trata de la densidad de pixeles de la pantalla. La unidad PPP de hecho significa Píxel por pulgada (En inglés PPI, píxeles por pulgada). Este valor indica el número de píxeles en un pulgar de longitud (2.54 cm). Cuanto mayor sea, más precisa será la pantalla.

Diagrama explicativo de la resolución expresado en PPP

Las pantallas actuales de los teléfonos inteligentes (Apple Retina, por ejemplo) tienen una resolución muy alta y los píxeles son generalmente indistinguibles.

Para obtener más información, consulte la página de definición y resolución de pantalla.

Especificaciones de pantalla de los modelos principales

Modelo Tamaño (pulgada) Tamaño (CM) Definición (píxeles) Resolución (PPP)
Galaxy S8 5.8 “ 14.7 cm 2960 x 1440 PX ~ 570 PPI
Galaxy S9 5.8 “ 14.7 cm 2960 x 1440 PX ~ 570 PPI
Galaxy S10E 5.8 “ 14.7 cm 2280 x 1080 PX ~ 438 PPI
Galaxy S10 6.1 “ 15.5 cm 3040 x 1440 PX ~ 550 PPI
Galaxy S8+ 6.2 “ 15.7 cm 2960 x 1440 PX ~ 529 PPP
Galaxy S9+ 6.2 “ 15.7 cm 2960 x 1440 PX ~ 529 PPP
Galaxy S20 6.2 “ 15.7 cm 3200 x 1440 PX ~ 563 PPP
Galaxy S21 5G 6.2 “ 15.7 cm 2400 x 1080 PX ~ 421 PPP
Galaxy S10+ 6.4 “ 16.3 cm 3040 x 1440 PX ~ 522 PPP
Galaxy S10 5G 6.7 “ 17 cm 3040 x 1440 PX ~ 505 PPI
Galaxy S20+ 6.7 “ 17 cm 3200 x 1440 PX ~ 525 PPI
Galaxy S21+ 5G 6.7 “ 17 cm 2400 x 1080 PX ~ 394 PPP
Galaxy S21 Ultra 5G 6.8 “ 17.3 cm 3200 x 1440 PX ~ 515 PPI
Galaxy S20 Ultra 6.9 “ 17.5 cm 3200 x 1440 PX ~ 511 PPP
Galaxy S22/S23 6.1 “ 15.5 cm 2340 x 1080 PX ~ 422 PPP
Galaxy S22+/S23+ 6.6 “ 16.8 cm 2340 x 1080 PX ~ 390 PPI
Galaxy S22 Ultra/S23 Ultra 6.8 “ 17.3 cm 3088 x 1440 PX ~ 501 PPI

La longitud indicada corresponde a la diagonal (en pulgadas y cm).

Al igual que su competidor, Apple, Samsung proporciona un comparador de teléfonos inteligentes (sitio de Samsung.com) para ver las diferencias entre sus diferentes modelos (especificaciones de pantalla, pero también memoria, procesador, dimensiones, etc.)). Desafortunadamente, solo encontrarás sus productos más recientes.

Con criterios de filtrado (sitio de Baker)

Especificaciones de los modelos principales

Modelo Tamaño (pulgada) Tamaño (CM) Definición (píxeles) Resolución (PPP)
Redmi 9 6.53 “ 16,6 cm 2340 x 1080 PX ~ 394 PPP
Redmi (nota) 10/10s 6.5 “ 16.5 cm 2400 x 1080 PX ~ 405 PPI
Redmi nota 11/11s 6.43 “ 16.3 cm 2400 x 1080 PX ~ 409 PPP
Redmi Note 11 Pro / Pro+ 6.67 “ 16,9 cm 2400 x 1080 PX ~ 395 PPI
Xiaomi 12/12x 6.28 “ 16 cm 2400 x 1080 PX ~ 419 PPP
Xiaomi 12 Pro / 13 Pro 6.73 “ 17.1 cm 3200 x 1440 PX ~ 522 PPP
Xiaomi 13 6.36 “ 16,2 cm 2400 x 1080 PX ~ 414 PPP

La longitud indicada corresponde a la diagonal (en pulgadas y cm).

Para ver todas las especificaciones técnicas de los teléfonos inteligentes de Xiaomi (el rango es relativamente amplio), consulte la página de información de su sitio, en MI.comunicarse.

Con criterios de filtrado (sitio de Baker)

Especificaciones de los modelos principales

Modelo Tamaño (pulgada) Tamaño (CM) Definición (píxeles) Resolución (PPP)
P30 6.1 “ 15.5 cm 2340 x 1080 PX ~ 422 PPP
P40 6.1 “ 15.5 cm 2340 x 1080 PX ~ 422 PPP
P30 lite 6.15 “ 15.6 cm 2312 x 1080 PX ~ 415 PPP
P40 Lite 6.4 “ 16.3 cm 2310 x 1080 PX ~ 398 PPI
P30 Pro 6.47 “ 16,4 cm 2340 x 1080 PX ~ 398 PPI
P40 Pro 6.58 “ 16.7 cm 2640 x 1200 PX ~ 441 PPP
P60 Pro 6.67 “ 16,9 cm 2700 x 1200 PX ~ 443 PPI
Nova 9 6.57 “ 16.7 cm 2340 x 1080 PX ~ 392 PPP
Nova 9 es 6.78 “ 17.2 cm 2388 x 1080 PX ~ 387 PPI
Mate 50 Pro 6.74 “ 17.1 cm 2616 x 1212 PX ~ 428 PPI
Compañero x3 (desplegado) 7.85 “ 19.9 cm 2496 x 2224 PX ~ 426 PPP

La longitud indicada corresponde a la diagonal (en pulgadas y cm).

Para obtener más información sobre tamaños y/o características técnicas (dimensiones, memoria, procesador, batería, sensores de fotos, etc.), puede usar la herramienta de comparación Huawei (en su sitio).

Con criterios de filtrado (sitio de Baker)

Tamaño de la tableta

Encontrará debajo de los tamaños de pantalla de las tabletas más comunes en el mercado (Apple iPad y Samsung Galaxy Tab). Puede haber múltiples variantes de estos modelos, pero las características son generalmente similares.

Especificaciones de los modelos principales

Longitudes diagonales de las pantallas de las tabletas de manzana

Modelo Tamaño (pulgada) Tamaño (CM) Definición (píxeles) Resolución (PPP)
iPad mini (6th Gen.)) 8.3 “ 21.1 cm 2266 x 1488 PX 326 pp
iPad (novena generación.)) 10.2 “ 25.9 cm 2160 x 1620 PX 264 PPP
iPad (décimo gen.)) 10.9 “ 27.7 cm 2360 x 1640 PX 264 PPP
Air ipad (quinta generación.)) 10.9 “ 27.7 cm 2360 x 1640 PX 264 PPP
iPad Pro 11 “(4th Gen.)) 11 “ 27.9 cm 2388 x 1668 PX 264 PPP
iPad Pro 12.9 “(6th Gen.)) 12.9 “ 32.8 cm 2732 x 2048 PX 264 PPP

La longitud indicada corresponde a la diagonal (en pulgadas y cm).

Para obtener más detalles sobre los diferentes modelos de iPad (características completas), no dude en usar el comparador de iPad (en Apple.com). Encontrará todas las imágenes, las variaciones por color y las especificaciones técnicas completas.

Con criterios de filtrado (sitio de Baker)

Especificaciones de los modelos principales

Longitudes diagonales de las pantallas de las almohadillas táctiles Samsung Galaxy Tab

Modelo Tamaño (pulgada) Tamaño (CM) Definición (píxeles) Resolución (PPP)
Galaxy Tab A7 Lite 8.7 “ 22.1 cm 1340 x 800 PX ~ 179 PPP
Galaxy Tab A8 10.5 “ 26.7 cm 1920 x 1200 PX ~ 216 PPP
Galaxy Tab S7 / S8 11 “ 27.9 cm 2560 x 1600 PX ~ 274 PPP
Galaxy Tab S7+ / S8+ 12.4 “ 31.5 cm 2800 x 1752 PX ~ 266 PPP
Galaxy Tab S8 Ultra 14.6 “ 37.1 cm 2960 x 1848 PX ~ 239 PPP

Cree una aplicación receptiva con UIKIT para iOS

Para abordar con calma la cuestión de la detección de los tamaños de pantalla, comencemos por los tamaños que tendrá que manejar en iOS.

Detener los tamaños de pantalla

Normalmente hablamos de tamaños de pantalla en pulgada (notado ”), y nosotros medir la diagonal.

En iOS, hay dos familias numerosas de tamaños:

  • tamaños de iPhone;
  • Tamaños de iPad.

En cada familia hay varios tamaños diferentes, que se encuentran en el diagrama a continuación.

Los diferentes tamaños en iOS se resumen en la tabla a continuación

Dispositivo

Tamaño

iPad Pro Big 1, 2

iPad Pro pequeño 2

iPad Pro pequeño 1

iPhone Pro Max 12, 13

iPhone 11 Pro Max

iPhone 11, 12, 13

iPhone Pro 12, 13

iPhone 6+, 6s+, 7+, 8+

iPhone 6, 6s, 7, 8

Esta tabla resume el doce tamaños Existente en la familia iOS con la lista exhaustiva de todos los dispositivos iOS asociados. No es necesario que sepas todo esto de corazón. Solo sé que hay seis tamaños para el iPhone y seis para el iPad. Y estos doce tamaños, puedes visualizarlos todos en el guión gráfico !

Visualizar los tamaños en el guión gráfico

Para cambiar el tamaño de la interfaz en el guión gráfico, use el selector de tamaños. Inferior a la izquierda del guión gráfico, tienes el siguiente botón:

El botón para acceder al selector de tamaños

Haga clic en él para revelar el selector de tamaño.

El selector de tamaños ofrece diferentes tamaños de

Aquí puede seleccionar el tamaño que desea mostrar las interfaces de su guión gráfico. Por defecto, el tamaño es el del iPhone 8 Plus, pero puede cambiar esto como desee.

Te invito a jugar un poco con los diferentes tamaños. Hay tres configuraciones posibles:

La talla

El tamaño de la pantalla le permite simplemente elegir el tamaño de la pantalla que desea ver.

Hay ocho tamaños para el iPhone, pero solo hay un tamaño para el iPad ! Se olvidaron?

Bien visto ! Con doce tamaños disponibles en total, Apple quería evitar mostrar una lista demasiado larga. Pero intente hacer clic en el iPad a la derecha de la lista, se actualizará instantáneamente mostrando los iPads disponibles, Magic !

Guía

Puede decidir mostrar el paisaje o la orientación del retrato aplicando una rotación a la pantalla:

El botón para cambiar el

Adaptación

Si elige uno de los iPads en el selector, hay una tercera configuración disponible: Adaptación.

El botón para adaptar el

De hecho, en el iPad, se pueden mostrar dos aplicaciones uno al lado del otro. Apple llama a esta vista dividida. De repente, la aplicación ya no tomará toda la pantalla, por lo tanto, es necesario proporcionar la variación en el tamaño de la interfaz en este caso. Y es con la configuración Adaptación que se puede visualizarlo.

En resumen

  • Hay doce tamaños de pantalla diferentes para dispositivos iOS: cuatro para el iPad y ocho para el iPhone.
  • Al igual que con el modo de vista previa, en el capítulo anterior, el selector de tamaño le permite visualizar lo que su aplicación ofrece en diferentes dispositivos directamente en el guión gráfico. Y puedes ver que tan pronto como dejamos el iPhone 8 Plus, no es muy convincente !

Desde el próximo juego, comenzaremos a resolver este problema ! Pero antes de bucear, verifique sus habilidades en el cuestionario. �� Nos vemos !