Featured

¿Cómo funciona la etiqueta meta Viewport?

By Ana Ramirez - Ilana Milkes | 6 de febrero de 2018
  • #World Tech Makers
  • #Coding Bootcamps
  • #Viewport
  • #Consejos para Programadores
  • #Cursos de Programación

Uno de los puntos claves del Responsive Web Design es entender, ¿cómo funciona la etiqueta meta Viewport?...

 porque tendrás todo listo, tus media queries para que cambien de estilo a las medidas de resolución de pantallas que hayas configurado, pero si no pones correctamente la etiqueta meta viewport será en vano lo que hiciste. Antes de hablar sobre la etiqueta meta viewport, veremos ¿Qué es el Viewport?

(Fuente: twoclock.com)

Viewport:

Es una ventana gráfica que fue creada por la compañía Apple para sus productos tales como: iPhone, iPod Touch o iPad, con la finalidad de solucionar el problema sobre el tamaño de la pantalla a la hora de visualizar y navegar en un sitio web.

Viewport no solo se puede usar como etiqueta en el HTML, sino también lo podemos usar en css colocando: @Viewport{ponemos las propiedades que deseemos}, pero en mi caso no he usando el viewport en css, porque solo escribiendo el viewport en el HTML es suficiente, esto según mi experiencia creando sitios responsive web design.

Luego de haber entendido que es viewport, veremos ahora cómo funciona la etiqueta meta viewport que está compuesta por las siguientes propiedades:

  • width: Se refiere al ancho que vamos a declarar.
  • initial-scale: Se refiere a la escala (zoom) que va tener como inicio.
  • maximum-scale: Se refiere a la escala (zoom) que va tener como máximo.
  • user-scalable: Se refiere al control del zoom en la página para darle la opción al usuario de aumentar o disminuir el tamaño

Para este ejemplo diremos que el ancho será igual al del dispositivo y que el usuario no tenga control de aumentar o disminuir la página.

Ahora veremos las formas de usar el initial-scale y maximum-scale.

  • A) Solo vamos a colocar el width y el initial-scale:
  • B) Juntamos el width, initial-scale, maximum-scale:

Pero seguro dirás ¿Qué significa el name y content en la etiqueta meta? Explicare un poco sobre esto para que entiendas, la etiqueta <meta /> tiene dos propiedades que son el name y el content. En algunas ocasiones has escuchado sobre meta description, meta autor, meta robots. En el name, se pone nombre del meta y en el content, el contenido del nombre del meta utilizado.

En conclusión el viewport es fundamental para todo sitio o aplicación web responsive, espero que te haya gustado este artículo, no te olvides de compartirlo en tus redes sociales y si tienes algún tema sobre desarrollo web del cual te gustaría saber más, inscríbete a nuestro newsletter!

Default author

Ana Ramirez - Ilana Milkes

VP