La etiqueta Meta Viewport

By Alex on 28 enero, 2013 in Desarrollo Web
0
0

Esta etiqueta inicialmente creada por Apple para Safari y estandarizada actualmente nos permite ajustar varios valores muy importantes a la hora de interpretar nuestra página desde cualquier navegador web para móvil.

Mediante la etiqueta viewport podremos decirle a nuestro navegador de nuestro móvil, tablet o smartphone con qué ancho, alto, escala o densidad de píxeles queremos renderizar el contenido de la web. Nuestro viewport sería el área visible de nuestra web, es decir, todo nuestro contenido exceptuando barras, ventanas y botones de nuestro navegador.

Los parámetros básicos a configurar son:

  • Width: anchura virtual de la pantalla o anchura del viewport. El valor podrá estar en píxels o la constante que tomará el ancho nuestro dispositivo (device-width).
  • Height: altura virtual de la pantalla o altura del viewport. El valor podrá estar en píxels o la constante que tomará el alto nuestro dispositivo (device-width).
  • Initial-scale: escala inicial del documento. El valor será un número real del 0,1 en adelante.
  • Minimum-scale: escala mínima que se puede poner en el documento. El valor será un número real del 0,1 en adelante.
  • Maximum-scale: escala máxima configurable en el documento. El valor será un número real del 0,1 en adelante.
  • User-scalable: si se permite o no al usuario hacer zoom. El valor será un  simple condicional yes o no.

Usaremos la etiqueta de la siguiente manera separando las propiedades por comas:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

About the Author

AlexView all posts by Alex >

0 Comments

Leave a reply

Deja una respuesta

Tu dirección de correo electrónico no será publicada.