Como dije anteriormente, dedicaría un post para hablar de viewport. Es otra de las aportaciones de Apple, aunque actualmente está estandarizada en cualquier navegador. Se ha hecho tan imprescindible que hoy no se entendería el diseño responsive sin la etiqueta viewport.
Pero incluso para quienes saber como y para que sirve, no les es facil explicarlo.
Para intentar entenderlo, primero habría que saber que significa «viewport». Hace referencia al area en el cual el navegador muestra el documento html. Cuando no se diseñaban webs para móviles, los anchos de la página se hacian pensando en una pantalla de ordenador. El problema estaba a la hora de ver la web en un móvil. Por ejemplo, en un iPhone. Aunque el ancho de pantalla puede ser de 320px, el viewport emula una de 980px y ajusta la web al tamaño de la pantalla. Por lo que todos los elementos de la página quedan a una escala más pequeña y dificulta la visión. Esto nos obliga a hacer zoom para verla medianamente bien.
Con viewport podemos indicar un ancho fijo para que el navegador adapte la web a ese ancho con las proporciones reales. Pongamos el ejemplo del iPhone. Quedaría así:
<meta name="viewport" content="width=320px">
Pero si hemos hecho un buen diseño responsive, osea que, nuestra página se adapta perfectamente a cualquier tamaño de pantalla, hemos usado media queries, medidas flexibles, etc… podemos usar «width=device-width». Lo que hace es, renderizar correctamente la web a la pantalla que se esté utilizando en ese momento. Sin duda, el más utilizado. También podemos poner una altura fija pero sinceramente, aún no conozco la persona que necesite ponerlo en su página.
Además, podemos dar otras indicaciones como el uso que pueden dar al zoom. Con initial-scale regulamos el zoom al cargar la web. Con minimun-scale y maximun-scale regulamos cual es el mínimo y máximo de zoom que puede hacer el usuario. Con user-scalable=no anulamos completamente el zoom. Las 3 primeras se miden de 0 a 1 siendo 0 el mínimo y 1 el máximo.
Personalmente, no recomiendo usar user-scalable para anular el zoom, ya que si un usuario tiene problemas de visión, será una experiencia mala si no puede ampliar. Hasta aquí todo lo que puedo aportar sobre «viewport». Por último, os dejo el ejemplo más utilizado:
<meta name="viewport" content="width=device-width, initial-scale=1">
Comentarios recientes