viewport
Responsive Web Design - The Viewport
Que es Viewport?
La mayoria de sitios web fueron diseñados para visualizarce en dispositivos con una dimencion de 1024px x 780px , pero con la llegada de de dispositivos tales son mini netbook, tabletas y los telefonos inteligentes, esto ocasionó que la navegacion en internet fuece algo incomodo por lo que los desarrolladores optaron por rediseñar los elementos de los sitios web, asi nacieron los sitios Responsive.
pero necesitavan que los dispositivos reconocieran la escala de dichos sitios y ajustaran el tamaño correcto, la llegada de HTML5 introdujo un método para que los diseñadores web tengan control sobre el área de visualización, a través de la (etiqueta) <meta> .Debe incluir la siguiente (etiqueta) <meta> de visualización en todas sus páginas web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Una (eiqueta)<meta> ViewPort da las instrucciones de como su navegador debe controlar las dimensiones y la escala de la página.
La width=device-width parte establece el ancho de la página para seguir la pantalla-anchura del dispositivo (que variará en función del dispositivo).
La initial-scale=1.0 parte fija el nivel de zoom inicial cuando la página se carga por primera vez por el navegador.
Este es un ejemplo de una página web sin la etiqueta meta de visualización, y la misma página web con la etiqueta meta de visualización:
Consejo: Si usted está navegando sobre esta pagina con un teléfono o una tableta, puede hacer clic en los dos enlaces de abajo para ver la diferencia.
