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
Dentro de esta temática, Maximiliano creó el sitio Mobile HTML5, que ayuda a entender la compatibilidad de HTML5 en navegadores mobile y tablets.
Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
exelente articulo, eso de view port no lo sabia! gracias
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.
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.
Muy bueno,de verdad de gran ayuda.
los felicito
[…] 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 […]
saben de algún simulador de iphone para windows? muchas gracias
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
Hola Beneet,
Gracias por tu comentario.
La etiqueta meta de viewport va en el header de TODAS las páginas de tu sitio.
Saludos!
[…] 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 […]
[…] del dispositivo (para más información sucinta sobre el viewport, podéis, por ekemplo, ver http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/ […]
perfecto para la visualización en móvil. muchísimas gracias por el aporte porque nos ha servido para mejorar nuestra web
saludos yo ya lo hice pero me repitio la pagina varias veces hacia abajo !! por que lo hace ???
[…] Más información sobre la etiqueta META de vierport en htmlcinco.com […]
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!
Apple appple, bueno a hacerlo nada más…
Tengo una duda, es necesaria si se hace el diseño mediante Responsive Design?
Gracias!
Muy buena info, como dices, sí que es explicativo el vídeo.
Muchas gracias por la información!
Saludos
Gracias por el aporte, es de mucha utilidad. Un saludo.
Muchas gracias por compartir esta información
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 .
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 ???
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,
Buenas…quisiera saber si ¿hay que distinguir la etiqueta meta para cada uno de los exploradores?
gracias
Hola Marcela.
No, no hay que distinguirla. Sólo debes usar la correcta.
Saludos.
Que tal?
Muy buena explicación, a nivel básico excelente para los compañeros que están empezando!!
Por cierto, muy bueno mencionar el error de configurar el viewport con width 320px, solo por que (no se..) inconscientemente o no, recuerden que cuando se creó era para el ancho de iPhone!!…
Ah!! otra cosa… genial el site http://mobilehtml5.org/ no lo conocía!! Muy bueno xdxd y con su .org de ayuda total y desinteresada, chapó!!
Me suscribí a tu web y voy a echar un ojo PIRATA ( lo de pirata lo digo por mi último sitio que estoy desarrollando ahora jaja tiendapirata.com ) a tus artículos…
Un cordial saludo compañero!!