Ajustar resolución de pantalla, considerando la densidad de pixeles para pantallas (retina, 4K, etc.)
Al adaptar los sitios web, debemos considerar la densidad pixeles para pantallas, es decir, la resolución de la pantalla. Entendemos la resolución de la pantalla como “…el número de pixeles que es capaz de mostrar una pantalla”, una mayor resolución indica mayor capacidad de mostrar detalles.
Tenemos diferentes escaladas de resolución: SD (480p), SD (480p), 1K (540p), HD (720p), 2K o Full HD (1080p), Quad HD (1440p), 4K o Ultra HD (2160p) y 8K (4320p).
A través de estas escalas de resolución podemos probar el sitio web en sus versiones adaptables.
En cuanto a la retina, Apple presentó la pantalla Retina en 2010 con el iPhone 4, el nombre comercial Retina surgió por el hecho de que sus pantallas ya tenían el número suficiente de píxeles por unidad de superficie para que el ojo humano no pudiera distinguirlos a una distancia de uso lógica.
De acuerdo con el blog Marketing (2023):
Con Retina, Apple multiplicó por cuatro el número de píxeles en el mismo espacio, creando una densidad de 326 píxeles por pulgada (ppp). Cuando se mira a una distancia de unos 25-30 centímetros las personas dejan de distinguir píxeles individuales a una densidad en torno a los 300 ppp. Esto hace que las pantallas Retina brinden una imagen suave y nítida.
Debido a este cambio los píxeles de CSS ya no tienden a ser iguales en el dispositivo, tienen una densidad de pixeles muy alta, los elementos se multiplican en tamaño. Por ejemplo, tenemos un div de 200px de ancho, en un iPad3 lo dibujará con 400px de pantalla de ancho.
Ajustar la resolución de pantalla teniendo en cuenta la densidad de píxeles (DPI o PPI) es esencial para garantizar una experiencia de usuario óptima en diferentes dispositivos. Aquí hay algunas pautas generales para manejar la resolución de pantalla en el desarrollo web:
Recomendaciones ajuste de pantalla, código realizado con JSFiddle. Puede ingresar al siguiente enlace: https://jsfiddle.net/InaWeb/nd8kabcm/45/
Al seguir estas prácticas, puede crear sitios web que se adapten de manera efectiva a una variedad de resoluciones de pantalla y proporcionar una experiencia de usuario coherente y de alta calidad.