La importancia de la etiqueta viewport en los nuevos diseños Web
La etiqueta meta para el 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.
La etiqueta viewport 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 respectivamente.Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Muchos desarrolladores caen en el error de configurar el viewport con un width de 320, siendo este el ancho del iPhone. Utilizando las constantes, se verá de mejor forma no solo en el iPhone sino que en muchos “mobile browsers” más. A continuación la configuración más común de una etiqueta meta, para introducir dentro del head de tu mobile web app:
|
<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″>
|
Recomendamos el libro relacionado con desarrollo web, Programming the Mobile Web
Podéis consultar el sitio Mobile HTML5, que ayuda a entender la compatibilidad de HTML5 en navegadores mobile y tablets .
