Acompáñennos en este tutorial a aprender el comportamiento y correcto uso de la etiqueta <meta name=”viewport”>

Si eres desarrollador web, de seguro sabes que en la actualidad se encuentran disponibles una serie de dispositivos con pantalla de distintos tipos y tamaños, lo que representa un reto y hasta un dolor de cabeza cuando queremos diseñar un sitio web que se vea bien en todas las resoluciones.

Los móviles no son la excepción; sin embargo, para que nuestro sitio se vea correctamente en estos dispositivos de pantalla pequeña es necesario utilizar la etiqueta:

Entendamos cómo funciona esta etiqueta y cómo usarla correctamente:

Lo que  hace la etiqueta es identificar el área disponible en el navegador para mostrar nuestra web. Además de contar con otros parámetros que le indican al navegador si debe mostrarla con un zoom inicial o permitir que se pueda o no hacer un zoom por parte del usuario.

Podemos usar la etiqueta de la siguiente manera

dentro de content especificaremos:

width=device-width con esto le decimos que tome el tamaño real del navegador para que muestre nuestro documento.

¿Tamaño real? ¡Así es! El navegador de los dispositivos móviles emula una resolución mayor para mostrar las páginas web, como veremos en la siguiente imagen.

Por la resolución de mi pantalla, los elementos deberían estar distribuidos de otra manera, pero gracias a que el navegador de mi dispositivo emula una resolución mayor, la web se muestra de esa forma.

Para evitar que esto suceda y visualizar correctamente nuestra página, debemos establecer un width=device-width dentro de la etiqueta 

"

Si queremos establecer una escala inicial a nuestra web, podemos agregar initial-scale=1 Con esto le establecemos una escala inicial de 1, lo que sería su tamaño normal. Sii le establecemos una escala de 2 al recargar el navegador, nos quedaría de la siguiente manera:

Si queremos evitar que el usuario puede escalar nuestra web, debemos establecer un user-scalable=no, así le decimos al navegador que el usuario no puede hacer zoom en la página.

Además, también podemos utilizar:

Height para establecer un alto o device-width, minimum-scale para establecer una escala mínima para nuestra página y maximum-scale que es lo opuesto a lo anterior.

Como podemos observar, la etiqueta no solo nos sirve para que nuestra web se vea bien en smartphones, sino que también nos permite afectar el comportamiento y cómo se muestra. Esto va de la mano con media queries en donde podemos definir una serie de estilos dependiendo de un determinado ancho de pantalla, pero eso es tema para otro tutorial.

Recuerda que si deseas aprender más sobre el comportamiento de esta etiqueta y cómo aplicarla en tus sitios es cuestión de práctica: crea un proyecto, aplica lo aprendido y cuéntanos qué tal te fue.

Para complementar lo que vimos hoy, te invitamos a ingresar al Curso de Responsive Web Design que tenemos en Devcode. ¡Hasta la próxima!