Mostrar sitios para móviles en escala correcta con viewport
Prácticamente todos los navegadores de smartphones al entrar a un sitio analizan el tamaño total y lo escalan para que se muestre completo en la pantalla, este procedimiento genera muchas veces resultados incorrectos y dolores de cabeza para los desarrolladores para web móvil.
Por ejemplo la imagen que se muestra a continuación tiene un gráfico que mide 320 pixels al igual que la pantalla del device, sin embargo, el gráfico aparece con un tamaño muy inferior a causa del efecto de escala automática.
Esta es una conducta normal del navegador, pero cuando estamos construyendo una versión móvil del sitio o una aplicación phoneGap puede generar problemas para diagramar un sitio que se vea consistente en todas las plataformas. La escala automática se puede prevenir y controlar de forma muy sencilla utilizando el atributo viewport. Vamos a revisar a profundidad esta útil técnica.
Insertar el viewport
El viewport es un atributo del tag <meta> que debe incluirse entre las etiquetas <head> de un documento HTML , siguiendo este patrón básico:
<!DOCTYPE html> <html lang="es"> <head>
<head>
<title> Tamaño adaptado a un móvil </title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<h1>Contenidos del Documento </h1>
</body> </html>
Con solo agregar estas líneas de código al documento del ejemplo, se mostrará a escala correcta en la pantalla de un equipo móvil
Configurando el Viewport
El viewport es el área visual en la cual mostramos un documento HTML y podemos manipular esta característica para controlar como mostrarlo en la pantalla de un móvil. Utilizando sus atributos podemos configurar elementos como el ancho, alto, tamaño y escala. A continuación la lista completa de propiedades del viewport:
Dimensiones
Es posible definir un tamaño especifico para el área visible del documento, muchos sitios toman el camino rápido y ajustan el viewport a 320 px para ajustar el aspecto al display vertical de un iPhone, usando un código similar a este
<meta name="viewport" content="width=320"/>
Pero, con la enorme fragmentación de equipos y tamaños de pantalla, definir un tamaño especifico como en el ejemplo anterior es una mala practica que puede mostrar resultados incorrectos en algunos equipos o cuando el dispositivo cambia de posición, afortunadamente podemos configurar el viewport para ajustarse dinámicamente al tamaño de cada dispositivo usando el atributo “device-width” que es equivalente al 100% del ancho de la pantalla del dispositivo, independiente de su tamaño, posición o resolución:
<meta name="viewport" content="width=device-width"/>
El alto de la pantalla también es configurable con las mismas propiedades a través del atributo “height” , aunque – salvo condiciones muy especificas- no es necesario definirlo. Esta propiedad se asignará automáticamente a través del scroll.
Escala
También podemos controlar la escala de la vista con el atributo “initial-scale“. Por ejemplocon este código el sitio se mostrará al doble de su tamaño original:
<meta name=”viewport” content=”width=device-width; initial-scale=2“/>
Es posible ademas, limitar el tamaño al que se puede escalar el sitio con el atributo “maximum-scale” . El siguiente ejemplo muestra el documento en escala correcta y permite escalarlo hasta al doble de su tamaño.
<meta name="viewport" content="width=device-width, maximum-scale=2"/>
Por ultimo está el atributo ”user-scalable“ controla los permisos de escala del documento,con el siguiente código, el sitio se muestra en su escala original y no es posible cambiar el tamaño desde el dispositivo móvil.
<meta name="viewport" content="width=device-width, user-scalable=no"/>
Importante mencionar que no se recomienda deshabilitar la opción de escalar el contenido
Viewport optimizado para móviles
El atributo viewport permite muchas configuraciones, pero para asegurar compatibilidad con la mayor cantidad de pantallas y navegadores móviles, se recomienda utilizar este formatocomo base:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Conclusión
Los dispositivos móviles escalan automáticamente los documentos HTML generando en ocasiones resultados no deseados. Podemos controlar el área visible de un documento a través del atributo viewport y sus propiedades.
La configuración del viewport nos será de gran utilidad tanto para la web móvil en HTML5como en aplicaciones basadas en phoneGap. Se recomienda usar el viewport optimizado para móviles para garantizar la compatibilidad con la mayor cantidad de resoluciones y plataformas.
Los archivos con los diferentes ejemplos están disponibles para descargar y probar.[descargar ejemplos]
Comentarios
Publicar un comentario