htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

La etiqueta meta viewport en la web móvil

La etiqueta meta viewport en la web móvil

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. A continuación una breve explicación y un video muy descriptivo.

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 (ej: 320, 480, etc) 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:

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Más abajo les dejo un video corto pero muy explicativo de la meta tag para definir el viewport. El que habla en el video es Maximiliano Firtman, autor (entre muchas cosas) de varios libros relacionados al desarrollo web, entre ellos recomiendo el libro Programming the Mobile Web, donde se puede leer mucho más de la mobile web y web apps, muy bueno. También les sugiero que lo sigan en Twitter en @firt).

Dentro de esta temática, Maximiliano creó el sitio Mobile HTML5, que ayuda a entender la compatibilidad de HTML5 en navegadores mobile y tablets.

Comparte conocimiento:
Tweet about this on Twitter0Share on LinkedIn1Share on Facebook34Share on Google+10
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

25 comentarios para “La etiqueta meta viewport en la web móvil”

  1. Patricia dice:

    exelente articulo, eso de view port no lo sabia! gracias

  2. Gruas dice:

    Hola. Justo estoy optimizando mi página para dispositivos móviles y encontré este video. Me gustaría saber un poquito más de las propiedades del viewport, a ver si me mandás un enlace de la continuación de este video. ¿está bien si solo uso el width, o necesariamente hay que usar todos?
    Te quería preguntar, a ver si me podés ayudar, sobre la redirección de páginas para dispositivos móviles. Es que tengo problemas con el código.
    Gracias.

  3. Gerard dice:

    Por fin soluciono mis dudas con eso. Llevaba 2 días intentando solucionar la visualización de mi web en los móviles, y es que había puesto viewport sin saber lo que era…

    Por cierto, la ‘sidebar’ se ve cortada en tu sitio, creo que es por el Responsive Web Design. Saludos.

  4. Carlos dice:

    Muy bueno,de verdad de gran ayuda.

    los felicito

  5. […] es utiliza para indicarle a los navegadores móviles el tamaño de la página. Más info en: http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/Seguidamente tenemos el título de la página: Código fuente   <title><?php […]

  6. joan dice:

    saben de algún simulador de iphone para windows? muchas gracias

  7. Beneet dice:

    Desconocia la existencia de esta meta etiqueta, pero me surgen varias dudas, tenemos que colocar este codigo en cada una de las paginas del sitio o solo basta con que este en el index. Grtacias por tu aporte, muy bueno

  8. admin dice:

    Hola Beneet,

    Gracias por tu comentario.
    La etiqueta meta de viewport va en el header de TODAS las páginas de tu sitio.

    Saludos!

  9. […] Yoko (y varias otras plantillas similares), echas mano de la etiqueta meta viewport y la consulta @media screen en la hoja de estilos, definiendo cómo va a reaccionar cada elemento […]

  10. laborus dice:

    perfecto para la visualización en móvil. muchísimas gracias por el aporte porque nos ha servido para mejorar nuestra web

  11. kain dice:

    saludos yo ya lo hice pero me repitio la pagina varias veces hacia abajo !! por que lo hace ???

  12. […] Más información sobre la etiqueta META de vierport en htmlcinco.com […]

  13. Profesor Yeow dice:

    Es un dolor de cabeza, yo le hubiera agregado otras funciones a este standar pero bue… al menos ayuda bastante en lo que es hoy en dia. Gracias por la info!

  14. Jhon Edison dice:

    Apple appple, bueno a hacerlo nada más…

  15. Ruben Diaz dice:

    Tengo una duda, es necesaria si se hace el diseño mediante Responsive Design?
    Gracias!

  16. gon dice:

    Muy buena info, como dices, sí que es explicativo el vídeo.

  17. Aurora dice:

    Muchas gracias por la información!
    Saludos

  18. Diseño web dice:

    Gracias por el aporte, es de mucha utilidad. Un saludo.

  19. Liliana dice:

    Muchas gracias por compartir esta información

  20. tienda online dice:

    Has dado en el punto con este articulo , realmente creo que esta web tiene mucho que decir en estos temas . Volveré pronto a vuestro blog para leer mucho más , gracias por esta información .

  21. lgoncede dice:

    Buenas mano muy buena explicación .. Una pregunta estoy tratando de hacer un blog.. Sin nada de framework .. Al puro sudor del código .. Tengo dudas con la parte de los comentarios ..tendrías algún material sobre eso ???

  22. Óscar Eusse dice:

    Que tal, buenas a todos.
    Les quería recomendar una extensión para chrome para el desarrollo web adaptable a diferentes dispositivos.

    La extensión se llama Web resizer, es muy fácil de usar.
    Cuenta con diferentes resoluciones para probar tu proyecto.
    Espero les sea de ayuda.

    Saludos,

  23. Marcela dice:

    Buenas…quisiera saber si ¿hay que distinguir la etiqueta meta para cada uno de los exploradores?
    gracias

  24. admin dice:

    Hola Marcela.
    No, no hay que distinguirla. Sólo debes usar la correcta.
    Saludos.

Dejar un comentario