Hace unos días expliqué qué es el Responsive Design. También comenté que iba a hacer unas entradas en el blog explicando el uso de varias cosas de esta “filosofía” del Responsive Design. Pues esta será la primera de esas entradas, en la que explicaré el uso de la etiqueta meta viewport.
Cuando una web no está adaptada a dispositivos móviles, y se quiere ver desde uno de ellos, casi seguro que ha de hacerse uso del zoom, cosa que se puede llegar a hacer muy engorrosa. Si además de tener que ir desplazándose por la web, hay que ir haciendo más o menos zoom según la zona, se hace molesto. Esto pasa porque se pone un ancho grande a una pantalla pequeña, entonces tiene que minimizarlo para que salga todo.
Pues bien, con la etiqueta meta viewport, se puede configurar el área visible de nuestro navegador. Sus propiedades son las siguientes:
- width : Define el ancho del área visible. El valor será el número de píxeles, o la constante que tomará el ancho del dispositivo: device-width.
- height : Define el altura del área visible. El valor será el número de píxeles, o la constante que tomará el ancho del dispositivo device-height.
- initial-scale : Define la escala inicial del área visible. El valor será un número real que irá de 0.1 en adelante.
- minimum-scale : Define la escala mínima del área visible. El valor será un número real que irá de 0.1 en adelante.
- maximum-scale : Define la escala máxima del área visible. El valor será un número real que irá de 0.1 en adelante.
- user-scalable : Define los permisos de si se puede o no escalar el área visible. El valor será: yes/no.
Esta etiqueta meta se usa como todas las demás, en el head, así:
<meta name="viewport" content="PROPIEDADES">
g
Como ejemplo pondré el que yo uso para el blog:
<meta name="viewport" content="width=device-width, initial-scale=1">
Nota: Las propiedades dentro del content, se separan por comas (,).
Espero que haya quedado todo bastante claro, y sino, se admiten preguntas en los comentarios.
Hola, ante todo gracias por compartir tus conocimientos con los demás, quería hacerte una pregunta, resulta que estoy desarrollando una webApp para tablets, y no me queda del todo claro el uso del viewport, más que nada porque al quitar la etiqueta de mi HTML5 y simular la aplicación en mi tablet el comportamiento es el mismo. Uso PhoneGap con eclipse.
Un saludo y gracias de antemano.
Disculpa la tardanza, pero aquí tienes mi respuesta:
¿Para qué quitas la etiqueta meta viewport? Es la que reconoce el área visible.
Hola,
Como te comento quizás no entiendo correctamente el funcionamiento del viewport en Android, entiendo que el viewport cuando realizas una aplicación se debe de encargar de ajustar esa aplicación al tamaño completo tanto de anchura como de altura de la pantalla siempre y cuando se especifique, pero en mi aplicación lo ignora sin embargo en un iPhone se ve perfectamente, he leido que quizás haya un problema con el viewport en Android…
Qué extraño… Debería de comportarse igual.
Por ejemplo, mi sitio web, se adapta bien en Android y puedes ver el viewport que tiene.
Wolas, muy contento con tu sitio, no muchos tutoriales pero el codigo fuentes es de inspiración, alguna idea de como detectar la resolución de pantalla del navegador dependiendo del usuario, no se si sea una pala practica con html5 seguirlo haciendo con javascript. Gracias.
Disculpa la tardanza, pero aquí tienes mi respuesta:
Con la etiqueta meta viewport y el uso de los media queries, no necesitas javascript en ningún momento.
Sólo un pequeño detalle, quizá quisquilloso:
no es “user-escalable”, es “user-scalable”
Pequeño pero importante. Gracias por avisar, se me coló una E. Corregido.
Pingback: Favoritos de Wakkos | Diseño web e Ilustración
El usar solo la meta viewport solociono que se ajuste mi web a un dispositivo movil ? o tengo que modificar mis estilos (*.css) con porcentajes y/o em ?
Has de utilizar más que eso. La etiqueta meta viewport solo sirve para lo explicado aquí arriba. Puedes echarle un ojo también a estas entradas:
- http://nentab.com/blog/2012/que-es-el-responsive-design/
- http://nentab.com/blog/2012/responsive-design-uso-de-las-propiedades-max-width-y-min-width/
Y a ver si estos días pongo una entrada para explicar el uso de los media queries, algo que ayuda mucho.
hablas de ancho y altura en ese caso cuales serian los valores apropiados porque no todos los dispositivos móviles son iguales con respecto a la pantalla.
Pues depende, porque hay muchas resoluciones, sobre todo en dispositivos móviles. Así que lo más cómodo quizá sea hacer tres o cuatro media queries para las resoluciones más generalizadas, y usar porcentajes (%) en los anchos para que cada uno de esos media queries sirva para varias resoluciones. Espero haberme explicado.
Saludos.
Pingback: Responsive Design: Uso de las propiedades max-width y min-width | Blog personal de nentab
Hace días esperaba esto del responsive design para aplicarlo a mi blog, esperaré la próxima entrada.
Saludos nentab
Me alegra que sirva. Pronto pondré el siguiente.
Sincermante no logro entenderlo xD
Mejor espero a que hagas más entradas de Responsive Design, por que con eso no voy a ningún lado creo yo ewe
¿Qué es lo que no entiendes?
Si me dices, trato de aclarártelo.
Da igual :3
Cuando haya más tutoriales y si lo quiero llevar a práctica ya me pondré con ello, no te preocupes xD