Viewport ayuda a visualizar tu página en dispositivos móviles

Publicado el en la categoría Diseño y Programación

La etiqueta viewport, inicialmente fue creada para ser añadida dentro de los “meta” de una página web. Esta etiqueta se usa para que los navegadores de los dispositivos móviles, escalaran correctamente las páginas, indicando el tamaño al cual se debía mostrar la página.
Su sintaxis básica es:

<meta name="viewport" content="
    width = [pixels | device-width ],
    height = [pixels | device-height],
    initial-scale = float,
    minimum-scale = float,
    maximum-scale = float,
    user-scalable = [yes | no]
">

Ahora bien, desde la W3C, lo que se está intentando es realizar la migración de meta viewport a CSS, apareciendo pues, la directiva @viewport, siendo su sintaxis:

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

e indicando el ancho que queremos que tenga la página, que en este ejemplo será el ancho que permita el dispositivo. Otros valores podrán ser:

  • min-width o max-width
  • min-height o max-height
  • min-zoom, max-zoom o user-zoom
  • zoom
  • orientation

Puedes consultar la página de referencia de la W3C para ver las posibilidades de @viewport para adaptar nuestra página web a los tamaños de los dispositivos móviles.

 

Facebooktwittergoogle_plus