El viewport es el area de la pantalla de tu dispositivo en la cual se muestra la pagina web. Es decir que no es el tamaño de tu pantalla, sino de un area especifica.
Cuando programas una pagina web, y la visualizas en un viewport de dispositivos mobiles, notas que esta se escala para ajustarse al ancho de tu pantalla. Esto hace que se vea como una pagina para PC pero en miniatura, cuando la idea es que se vea de forma adecuada para la orientacion y tamaño de tu dispositivo.
La solucion a esto se conoce como diseño y desarrollo responsivo y el primer paso para conseguirla es declarando en html que el ancho del viewport sea igual al ancho que se detecte en el dispositivo.
Dentro de <head> se escribe una etiqueta <link>, en la cual se declara "viewport" en rel y dentro de content se declara "width=device-with". Con esto las dimensiones de fuente y unidades de medida se adaptaran al ancho del dispositivo, logrando mejor visibilidad del contenido. Por ultimo, dentro de los parametros de content se agrega , initial-scale=1.0 para indicar que no habra ningun "zoom" o, en otras palabras, no se multiplicara la escala de los componentes dentro de la pagina web.
Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@shur_d_firsiel