Viewport versus resolución de pantalla

Le preguntaremos a ChatGPT 4 sobre un tema básico al diseñar interfaces gráficas digitales:

Vk: Hola don Chat Gepeté, consulta: Illustrator tiene en la opción «New Document» una opción para diseñar para iPhone X, dice que es 1125×2436, y la misma resolución aparece en Google al buscar el iPhone X. Sin embargo, en las herramientas de desarrollador de Chrome, cuando selecciono «Dimensiones: iPhone X» dice 375×812, ¿qué significa? ¿por qué la resolución en illustrator y en las especificaciones técnicas es 3 veces mayor que en las herramientas de desarrollador de Chrome?

ChatGPT: La diferencia en las resoluciones que mencionas para el iPhone X en Illustrator y en las herramientas de desarrollador de Chrome se debe a la forma en que se manejan las dimensiones de la pantalla en diferentes contextos: diseño gráfico frente a desarrollo web.

1. Resolución de Illustrator (1125×2436): Esta es la resolución real del iPhone X en píxeles físicos. Significa que la pantalla del iPhone X tiene 1125 píxeles de ancho y 2436 píxeles de alto. Cuando diseñas gráficos o interfaces para dispositivos móviles en programas como Illustrator, trabajas con esta resolución para garantizar la máxima calidad y precisión.
2. Resolución en Herramientas de Desarrollador de Chrome (375×812): Esta resolución es en píxeles lógicos o píxeles CSS. Los navegadores y los sistemas operativos modernos usan una técnica llamada «escalado de píxeles» para manejar mejor las pantallas de alta densidad, como la del iPhone X. En este caso, el navegador escala los elementos para que se vean del tamaño adecuado y sean legibles, en lugar de usar los píxeles físicos reales de la pantalla. Por eso, aunque la resolución física es 1125×2436, la resolución lógica es un tercio de esa medida.

En resumen, cuando diseñas gráficos, trabajas con la resolución física real para asegurarte de que todo se vea nítido y detallado. Pero en el desarrollo web, trabajas con una resolución lógica para garantizar que la página sea funcional y estéticamente agradable en diferentes dispositivos, independientemente de su densidad de píxeles.