Tamaños de UI móvil

Funciones

• Resoluciones lógicas (pt), factor de escala y resolución física de iPhone y iPad habituales
• Anchos en dp comunes de Android, con el aviso de que no hay un valor único
• Áreas seguras: 59pt con la Isla Dinámica, 47pt con notch, 20pt sin notch y 34pt para el indicador de inicio
• Android: barra de estado 24dp y barra de navegación 48dp
• Objetivos táctiles mínimos: Apple 44×44pt, Material 48×48dp, WCAG AA 24×24px, WCAG AAA 44×44px
• La escala tipográfica de iOS, 11 pasos (de Large Title a Caption 2)
• La escala tipográfica de Material 3, 15 pasos (de Display a Label)
• Base de espaciado de 8pt / 8dp con los pasos habituales, y los seis niveles de radio de esquina de Material 3
• Las cinco clases de tamaño de ventana de Material 3, que sirven de puntos de ruptura
• Búsqueda por modelo, por número (390, 44) o por categoría
• Las siete categorías en un desplegable con búsqueda: elige una para recorrerla
• Vacío lista la tabla completa, recorrible como hoja de referencia

Cómo se usa

1. Escribe un modelo, como iPhone 14 Pro, para ver su resolución lógica y su factor de escala
2. O escribe un número, como 390 o 44, para saber qué es
3. Para recorrer, escribe una categoría como «objetivos táctiles», o elige una en el desplegable
4. Deja el cuadro vacío para listarlo todo, agrupado en las siete categorías

Preguntas frecuentes

¿Con qué ancho debería empezar un diseño?

En iOS, 375pt y 390pt son los dos puntos de partida habituales. 375 es la línea base antigua (iPhone SE y la generación del 8); 390 es el ancho común desde el iPhone 12 y se divide bien en mitades y tercios. No hay una única respuesta correcta, pero no construyas a un solo ancho: el mismo diseño tiene que aguantar de 375 a 440 aproximadamente, así que constrúyelo con diseño flexible, porcentajes y restricciones adaptativas en vez de sacar una versión por ancho. En Android vale el mismo razonamiento, con los anchos concentrados entre 360 y 412 dp.

¿Caducarán los datos de los dispositivos?

Sí, y con seguridad. Cada lanzamiento puede traer una resolución lógica nueva, y esta herramienta registra cuándo se verificó (se indica en la página). Así que úsala para dispositivos existentes, y para un modelo anunciado la semana pasada, remítete al fabricante. Es también la razón de que cubra dispositivos habituales y no todos: una tabla que presume de listarlos todos es justo la que se queda obsoleta en silencio por algún lado.

¿Cuál de los cuatro números de objetivo táctil debo usar?

Depende de tu plataforma y de tu objetivo de conformidad. Para una app iOS, sigue los 44×44pt de Apple; para una app Android, los 48×48dp de Material: ambos son el requisito oficial de su plataforma, así que basta con cumplirlos. En la web, ojo, WCAG es más laxo: AA pide solo 24×24px y admite una alternativa basada en separación; los 44×44px de AAA coinciden con el número de Apple. En la práctica, construye a 44px: cumple los tres, y la diferencia de 4pt es imperceptible en la yema del dedo mientras elimina toda una clase de problemas de conformidad.

¿Por qué Android usa dp en vez de pt?

Son la misma idea con dos nombres: una unidad lógica independiente de la densidad de píxeles (iOS la llama point, Android, píxel independiente de densidad). El sistema convierte ambas a píxeles físicos según la densidad, así que un Android de 360dp de ancho y un iPhone de 375pt son físicamente parecidos. El equivalente en CSS es el píxel CSS independiente del dispositivo. Los nombres distintos hacen que parezcan dos conceptos, pero la lógica de conversión es idéntica.

¿Por qué no hay dispositivos Android concretos?

Porque hay demasiados, con resoluciones demasiado variadas, y listarlos induciría a error: cualquier tabla de modelos omite una gran parte de los dispositivos en uso, y los omitidos bien pueden ser los que tienen tus usuarios. Así que el lado Android da el intervalo (360–412 dp) y dos valores típicos, más el consejo de construir de forma flexible, que ayuda mucho más que una lista de modelos. Para un dispositivo concreto, consulta la página oficial del fabricante.