Tamaños de pantalla y resoluciones de dispositivos

Resolución lógica frente a física y el DPR

Toda pantalla moderna tiene dos resoluciones. La resolución física es la cantidad real de píxeles integrados en el panel — por ejemplo, 1179 × 2556 en un iPhone 15. La resolución lógica (CSS) es el espacio de coordenadas más pequeño en el que se maqueta una página web, como 393 × 852. El ratio de píxeles del dispositivo (DPR) es el puente entre ambas: es la resolución física dividida entre la lógica, de modo que un DPR de 3 significa que el teléfono dibuja un bloque de 3 × 3 píxeles reales por cada píxel CSS. Los teléfonos y portátiles de alta densidad “Retina” usan un DPR de 2 o 3 para renderizar texto e imágenes nítidos, mientras que un monitor de escritorio típico tiene un DPR de 1, donde un píxel CSS equivale a un píxel físico.

Por qué los diseñadores trabajan con tamaños de viewport

Cuando construyes un diseño responsive, tus media queries y breakpoints de CSS se miden en píxeles CSS — el viewport lógico — no en los píxeles físicos del panel. Un teléfono que físicamente mide 1080 píxeles de ancho sigue reportando un viewport de solo 360–414 píxeles CSS, por lo que un breakpoint móvil de 360px cubre a la mayoría de los teléfonos Android. Diseñar según el viewport en lugar de la resolución bruta mantiene un tamaño físico coherente para el texto y los elementos táctiles en dispositivos con densidades de píxeles muy distintas, de modo que el mismo diseño se ve bien tanto en un portátil de baja densidad como en un teléfono insignia de alta densidad.

Cómo leer esta tabla

• El viewport (px CSS) es el tamaño lógico que ve una página web, indicado en la orientación natural del dispositivo — vertical para teléfonos y tablets, horizontal para portátiles y monitores.
• La resolución física es el número real de píxeles del panel, la cifra que anuncia una ficha técnica.
• El DPR (ratio de píxeles del dispositivo) multiplica el viewport hasta llegar a la resolución física; cualquier valor superior a 1 indica una pantalla de alta densidad.
• La relación de aspecto es la forma de la pantalla, desde el estrecho y alargado 19.5:9 de los teléfonos modernos hasta el 16:9 de la mayoría de los monitores y el 21:9 y 32:9 de los ultrapanorámicos.
• Las filas de portátiles y 4K reflejan el nivel de escalado de pantalla predeterminado más habitual, por lo que el viewport puede ser menor que la resolución nativa del panel.

Los tamaños cambian con cada modelo

Toma estas cifras como una referencia práctica, no como una garantía. Los fabricantes revisan las dimensiones de pantalla casi en cada generación — solo el iPhone ha lanzado viewports de 375, 390, 393, 402, 414, 430 y 440 píxeles CSS de ancho en sus modelos recientes — y los dispositivos Android varían todavía más. El escalado de pantalla del sistema operativo modifica de nuevo el viewport reportado: un portátil Windows con panel 1080p al 150% de escalado se comporta como una pantalla de 1280 × 720 con un DPR de 1.5. El dato más fiable siempre es el que reporta tu propio navegador, por eso el dispositivo coincidente de arriba se detecta en vivo a partir de tu pantalla.