<< Volver
La web móvil y la utilidad de la etiqueta

La web móvil y la utilidad de la etiqueta "viewport"

22 Marzo 2013 / Desarrollo Web

En la actualidad, cuando abordamos el desarrollo de un sitio web se hace casi imprescindible atender a su correcta visualización en dispositivos móviles. Ni qué decir tiene que si la misión que nos ocupa es el desarrollo de una web móvil, esto se sobreentiende. A la hora de realizar dichos desarrollos debemos tener en cuenta la gran cantidad de dispositivos y navegadores existentes. Esto, a la hora de la verdad puede provocarnos un pequeño dolor de cabeza.

Debido a la experiencia de los últimos días hoy queremos abordar la utilización de la etiqueta "viewport" y su importancia a la hora de definir el tamaño de la web en los navegadores móviles.

La etiqueta meta viewport fue introducida por Apple en Safari para móviles, para ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un iPhone, iPod Touch o iPad. Esta etiqueta nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido.

Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles o usar dos constantes, device-width y device height, con las que adaptaremos nuestra web al ancho y al alto de la pantalla del dispositivo respectivamente. Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo.
A continuación mostramos la lista completa de propiedades de viewport:

Atributo Valores Descripción
width Valor integral (en pixeles)
o constante device-width
Define el ancho del viewport
height Valor integral (en píxeles)
o constante device-height
Define el alto del viewport
initial-scale Cualquier número real de 0.1 en adelante. 1 representa no escala. Escala inicial del viewport
minimum-scale Cualquier número real de 0.1
en adelante. 1 representa no escala.
Escala máxima del viewport
maximum-scale Cualquier número real de 0.1 en adelante. 1 representa no escala. Escala mínima del viewport
user-scale "yes" / "no" Permiso para que el usuario pueda escalar el viewport


Algunos ejemplos de su uso serían los siguientes:

  • Adaptamos el área visible de la web al ancho de la pantalla del dispositivo. No permitiremos al usuario la ampliación ni el escalado de la web.
          <meta name="viewport" content="width=device-width, user-scalable=no">
  • Definimos un ancho fijo de 320 píxeles
          <meta name="viewport" content="width=320"/>
  • Adaptamos el área visible al ancho de la pantalla fijando una escala mínima y una escala máxima.
          <meta name="viewport” content=”width=device-width, minimum-scale=2,maximum-scale=3“/>

 

Os dejamos un vídeo para poder entender mejor el funcionamiento de la etiqueta viewport

Comparte esta entrada
×

Esta web utiliza cookies propias y de terceros para analizar la navegación, mejorando así su experiencia y nuestros servicios. Si continúa navegando, consideramos que acepta su uso. Consulte nuestra política de cookies para obtener información adicional sobre tipos, finalidad y forma de gestionarlas.