Tamaños de pantalla en móvil y tablet: de centímetros a píxeles

Una diseñadora que viene del mundo gráfico pide las medidas en centímetros y en el otro lado de la mesa alguien le contesta que en web no se trabaja así. Los dos tienen parte de razón, y la conversación se resuelve en dos minutos si alguien pone encima la equivalencia.

Porque los centímetros existen. Una pantalla es un objeto físico que se puede medir con una regla. Lo que pasa es que la unidad con la que se maqueta no es esa, y la traducción entre ambas no es tan directa como parece.

Por qué un píxel no mide siempre lo mismo

El píxel del que habla un desarrollador no es el punto de luz de la pantalla. Es una unidad de referencia, el llamado píxel CSS, y cada dispositivo decide a cuántos puntos físicos lo escala para que el contenido se vea de un tamaño cómodo.

Un iPhone 15 tiene una pantalla de 1179 puntos de ancho, pero para maquetar se comporta como si tuviera 393. El navegador multiplica por tres. Un iPad Pro multiplica por dos. Ese factor se llama densidad de píxeles o device pixel ratio, y es la razón por la que un mismo diseño puede verse del mismo tamaño en dos móviles con resoluciones muy diferentes.

Aquí está el motivo de que la conversión a centímetros no sea una constante: cada fabricante ajusta ese escalado a su manera. En la práctica el resultado se mueve dentro de una horquilla estrecha, entre 52 y 65 píxeles por centímetro en móviles y tablets.

Como referencia mental, 1 cm equivale a unos 55 px. No es exacto y no debería usarse para nada más que hacerse una idea del tamaño físico de las cosas.

En un monitor de escritorio la relación baja a unos 38 px por centímetro. La diferencia no es un capricho: una pantalla de ordenador se mira desde 50 o 60 cm y un móvil desde 30, así que hace falta menos tamaño físico para conseguir la misma legibilidad.

Los cuatro lienzos que necesitas

No hace falta un diseño por modelo de móvil. Con cuatro tamaños de mesa de trabajo se cubre prácticamente todo, y los tres primeros bastan para la mayoría de proyectos.

Lienzo	Píxeles	Tamaño físico
Móvil vertical	390 × 844	≈ 6,5 × 14,1 cm
Móvil horizontal	844 × 390	≈ 14,1 × 6,5 cm
Tablet vertical	820 × 1180	≈ 15,8 × 22,7 cm
Tablet horizontal	1180 × 820	≈ 22,7 × 15,8 cm

El de móvil vertical es el que manda. Entre el 70 % y el 80 % del tráfico de una web de servicios entra por ahí, así que es donde debería empezar el diseño y no donde se adapta al final.

La tablet en vertical mide más o menos como un folio A4, lo cual ayuda bastante a hacerse una idea. Y en horizontal se comporta casi como un escritorio pequeño, hasta el punto de que muchos proyectos reutilizan ese diseño en lugar de hacer uno propio.

Cuánto se ve nada más abrir la página

Este dato se pasa por alto y luego se paga caro. La altura del lienzo no es la altura visible: las barras del navegador se comen una parte, y en móvil no es poca.

Lienzo	Alto total	Alto visible	En cm
Móvil vertical	844 px	≈ 700 px	11,7 cm
Móvil horizontal	390 px	≈ 290 px	4,8 cm
Tablet vertical	1180 px	≈ 1060 px	20,4 cm
Tablet horizontal	820 px	≈ 700 px	13,5 cm

Fíjate en el móvil horizontal. Menos de 5 cm de alto es lo que hay antes de que alguien tenga que hacer scroll, y ahí no cabe una cabecera a pantalla completa con imagen, titular y botón. Es el motivo por el que tantas webs se ven vacías al girar el teléfono.

La solución no es diseñar una versión aparte para esa orientación, que casi nadie usa fuera del vídeo y los mapas. Basta con limitar la altura de las cabeceras en porcentaje en lugar de fijarla en píxeles.

Qué mide cada elemento en la mano

Estas son las medidas que de verdad usa alguien que diseña. La columna de puntos tipográficos está pensada para quien viene de imprenta y quiere comparar con algo que conoce.

Elemento	Píxeles	Milímetros	Puntos
Botón o icono, mínimo absoluto	44 px	8 mm	—
Botón cómodo	48–56 px	9–10 mm	—
Separación entre dos botones	8–12 px	1,5–2 mm	—
Cuerpo de lectura	16–18 px	2,9–3,3 mm	8–9 pt
Texto secundario, mínimo	14 px	2,5 mm	7 pt
Titular en móvil	28–34 px	5–6 mm	14–17 pt
Margen lateral en móvil	16–24 px	3–4,4 mm	—
Margen lateral en tablet	32–48 px	6–9 mm	—
Aire entre bloques	40–64 px	7–12 mm	—

Los 8 milímetros del botón no son una cifra inventada: es aproximadamente lo que ocupa la yema de un dedo adulto sobre el cristal. Apple recomienda 44 px y Google 48 px, y por debajo de ahí la gente falla el clic y se va.

El dato que suele sorprender a quien viene de diseño gráfico es el del texto. Un cuerpo de 16 píxeles equivale a unos 8 puntos tipográficos, que sobre papel parecería letra pequeña. En pantalla se lee bien porque la distancia de lectura es menor, así que no hay que corregirlo al alza por instinto.

Cuánto miden las pantallas de verdad

Medidas del área activa de cada modelo, calculadas a partir de su diagonal y su resolución. La última columna explica por qué la conversión varía de uno a otro.

Modelo	Pantalla física	Lienzo	px/cm
iPhone SE	5,9 × 10,4 cm	375 × 667	64
iPhone 15 / 16	6,5 × 14,1 cm	393 × 852	61
iPhone 16 Pro Max	7,3 × 15,9 cm	440 × 956	60
Galaxy S24	6,6 × 14,3 cm	360 × 780	55
Galaxy S24 Ultra	7,2 × 15,7 cm	384 × 832	53
Pixel 8	6,5 × 14,4 cm	412 × 915	64
iPad mini	11,6 × 17,6 cm	744 × 1133	64
iPad (10.ª gen)	15,8 × 22,7 cm	820 × 1180	52
iPad Air / Pro 11″	16,0 × 22,9 cm	834 × 1194	52
iPad Pro 12,9″	19,7 × 26,2 cm	1024 × 1366	52
Galaxy Tab S9	14,8 × 23,7 cm	800 × 1280	54

Salta a la vista una cosa: entre el móvil más pequeño y el iPad Pro hay 14 cm de diferencia de ancho, pero el rango de píxeles por centímetro apenas se mueve. Los fabricantes escalan sus pantallas para que un botón de 48 px se vea más o menos igual de grande en todas.

Dónde cambia el diseño

Los puntos en los que la maquetación reorganiza los bloques se llaman breakpoints. Estos son los que usa la mayoría de proyectos, y sirven de referencia para saber cuántas versiones hay que dibujar.

Desde	Hasta	Dispositivo	Rejilla habitual
320 px	639 px	Móvil	1 columna
640 px	767 px	Móvil grande y horizontal	1 o 2 columnas
768 px	1023 px	Tablet vertical	2 columnas
1024 px	1279 px	Tablet horizontal y portátil	2 o 3 columnas
1280 px	—	Escritorio	3 o 4 columnas

Una web no escala el diseño entero como haría un PDF ampliado. Al pasar cada uno de esos umbrales reordena los bloques: lo que estaba en tres columnas pasa a una, el menú se pliega, las fotos cambian de proporción. Por eso un diseño entregado sin indicaciones deja al desarrollador decidiendo por su cuenta.

Merece la pena dejar marcado qué mantiene su tamaño pase lo que pase (logotipo, iconos, botones) y qué crece con la pantalla (fotos, cajas de texto, columnas de contenido).

Cinco errores que obligan a rehacer trabajo

Diseñar sobre la resolución del móvil. Si buscas las especificaciones de un iPhone 15 encontrarás 1179 × 2556 píxeles. Ese número es la resolución física de la pantalla y no sirve como lienzo. Maquetar ahí hace que todo salga al triple de tamaño. El lienzo es 390 × 844.

Entregar las imágenes a tamaño real. Un icono que ocupa 24 px en el diseño se exporta también a 48 y 72 px, porque las pantallas de alta densidad muestran dos o tres puntos físicos por cada píxel de maquetación. Sin esas versiones se ven borrosas.

Fijar la altura de las cabeceras en píxeles. Funciona en el móvil sobre el que se diseñó y se rompe en el resto, sobre todo al girar el teléfono.

Textos por debajo de 14 px. Sobre el monitor grande de quien diseña parecen correctos. En la mano, a 30 cm y con sol de por medio, no se leen.

Olvidar los estados. Un botón necesita su versión pulsada, la desactivada y la de carga. Si no vienen en el diseño, alguien los inventará más tarde, y no siempre acertará con el color.

Cómo montarlo en Figma

Figma trae los tamaños de dispositivo en el panel de mesas de trabajo, así que no hace falta escribir las medidas a mano. Elige iPhone 14 & 15 Pro (393 × 852) o el genérico de 390 × 844 para móvil, y iPad mini 8.3 o el de 820 × 1180 para tablet.

Trabaja siempre a escala 1:1, sin multiplicar nada, y deja que la exportación se encargue de las densidades marcando las salidas a 2x y 3x. Si necesitas ver el tamaño real, pon el zoom al 100 % y acerca el móvil a la pantalla: no coincidirá del todo, porque tu monitor tiene otra densidad, pero te dará la referencia suficiente.

Una recomendación que ahorra discusiones: entrega el diseño de móvil primero y el de escritorio después. Al revés casi siempre hay que quitar cosas, y quitar duele más que añadir.

Preguntas frecuentes

¿Cuánto es 1 cm en píxeles? Unos 55 px en móvil y tablet, y unos 38 px en un monitor de escritorio. La cifra exacta depende del modelo, porque cada dispositivo escala los píxeles a su manera.

¿Qué tamaño de mesa de trabajo uso para móvil? 390 × 844 px. Es el estándar actual y encaja con la mayoría de móviles en circulación.

¿Y para tablet? 820 × 1180 px en vertical, 1180 × 820 px en horizontal.

¿Hay que diseñar la versión horizontal del móvil? Salvo que la web tenga vídeo, mapas o galerías a pantalla completa, no compensa. Basta con evitar alturas fijas para que la vertical se adapte sola.

¿Por qué mi diseño se ve más pequeño en el móvil que en el ordenador? Porque un monitor muestra menos píxeles por centímetro. Un bloque de 390 px de ancho ocupa unos 10 cm en el escritorio y solo 6,5 cm en la mano.

¿Cuál es el tamaño mínimo de un botón? 44 × 44 px según Apple y 48 × 48 px según Google, que son unos 8 o 9 milímetros de lado.

---

Si estás preparando una web y quieres que el diseño llegue al desarrollo sin sorpresas, en Roilab trabajamos las dos partes del proceso. Cuéntanos el proyecto y te decimos qué hace falta.