Source: https://practicaldev-herokuapp-com.global.ssl.fastly.net/campusmvp/desarrollo-web-mvil-qu-diferencia-existe-entre-el-viewport-y-la-resolucin-de-pantalla-de-un-dispositivo-1aog
Timestamp: 2020-08-05 15:01:57+00:00

Document:
Desarrollo Web móvil: ¿Qué diferencia existe entre el Viewport y la resolución de pantalla de un dispositivo? - DEV
#webdev #rwd #spanish
José M. Alarcón 🌐 Sep 28, 2018 Originally published at campusmvp.es on Sep 28, 2018 ・5 min read
Así por ejemplo, los primeros tablets iPad de Apple, el iPad 1 y el 2, tenían una resolución de pantalla de 1024x768 píxeles, y el tamaño por defecto de su viewport era exactamente el mismo (o sea, una ratio de pixels de 1x ). Sin embargo, cuando lanzaron el iPad 3 que ya tenía una pantalla "retina", la resolución física de la misma era 2048x1536, mientras que el tamaño del viewport seguía siendo el mismo : 1024x768 (es decir, la mitad, y por tanto una ratio de píxeles de 2x).
Al ancho del viewport se le suele denominar ancho en píxeles CSS , ya que no son píxeles reales sino los que el navegador (y por lo tanto sus hojas de estilo) ven en la práctica de cara a diseñar el layout de la página.
Pues quiere decir que, en un dispositivo móvil, la pantalla realmente tiene capacidad para mostrar imágenes de 2048 píxeles de ancho y 1536 de alto. Y si abres una imagen de estas dimensiones la mostrará perfectamente. Sin embargo, al visualizar algo en el navegador móvil del dispositivo, el área disponible "simula" una resolución de pantalla menor , en este caso la mitad de la capacidad de resolución real, e indica a la página que su resolución es de 1024x768. Es decir, en este caso el viewport es menor (la mitad) que las dimensiones de la pantalla.
En resumen : es importante tener claro que el concepto de viewport y de resolución de pantalla son independientes, uno puede ser mayor que el otro y viceversa, y que su relación determina cómo se visualizará un contenido web en la pantalla.
More from campusMVP

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución