Etiqueta Viewport
- Sebastian Perez (Unlicensed)
La mayoría de los navegadores de smartphones escalan o redimensionan el tamaño de los sitios para poder mostrarlos completos en las pantallas.
Si bien la navegación mediante zoom es una conducta normal, genera problemas de visualización en las versiones móviles de los sitios.
En este ejemplo vemos cómo se visualizan las imágenes en un smartphone con resolución de pantalla de 320 pixeles:
Cómo el navegador produce una escala automática, la imagen se visualiza con un tamaño inferior.
Solución
Para evitar que se produzca la escala automática se puede agregar la etiqueta meta VIEWPORT.
| <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> |
Esta etiqueta de debe implementar en el header del sitio. Aquí se define la escala del área usada por el navegador para mostrar el contenido.
Será leida solo en navegadores móviles y servirá para establecer la escala en 1 y el nivel de zoom habilitado:
Si agregamos la etiqueta viewport en el ejemplo anterior, la visualización es la siguiente:
La imagen de 320 px ocupa la totalidad de la pantalla y se visualiza de manera correcta.
| <html> .....Programación del sitio (+ implementación e-planning) |
Para más información puede consultar los siguientes artículos:
- Feed XML