Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Consejo rápido: no olvides la etiqueta meta viewport

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Explaining the “Details” and “Summary” Elements

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Recuerdo mi primer viaje al interior del diseño responsivo; Usé una cuadrícula clásica, luché con un arreglo flexible y abordé los media queries por primera vez. Estirar y encoger la ventana del navegador resultaba en la satisfactoria visión de mi diseño respondiendo a su entorno. Después lo probé en versión móvil. No funcionó – Estaba viendo una versión encogida del diseño de pantalla completa. La solución, tal como resultó, fue simple..

Nota: Éste tutorial fue publicado por primera vez en Febrero de 2012, pero es a menudo usado como referencia en otros tutoriales (y las cosas han cambiado) así que sentí que requería una actualización.

El meollo

Si no lees nada más que éste artículo, toma en cuenta un pequeño consejo: si estás diseñando flexiblemente, usa la etiqueta meta viewport en tu <head>. En su forma básica, te preparará para la tranquilidad del layout multi-dispositivo:

El Problema

Usemos un layout de ejemplo que compuse. Da un vistazo; Verás que se encoge y crece según cambias el tamaño de tu navegador. Hay también un único media query que hace el texto más grande y le da al encabezado un brillante color #ff333e en pantallas más anchas. Encantador.

Aquí está como se ve en Chrome para OSX.

viewport-chrome-correct

Y aquí está como aparece cuando la ventana del navegador es reducida:

viewport-chrome-squish

Ahora veamos cómo luce en un teléfono inteligente (en éste caso Safari de iOS en un IPhone 4):

viewport-iphone-incorrect

La primer cosa que notarás es el encabezado rojo; un claro indicativo de que no estamos viendo el layout estrecho que esperaríamos. En realidad estamos viendo una version encogida.

Safari en iOS asume que una página web tiene 980px de ancho, reduciendo el zoom con la finalidad de encajar la totalidad de la página en sus 320px disponibles (iPhone 4). El contenido es mucho menos legible, a menos que aumentes el zoom.

¿Por qué?

Como dicen, la suposición es la madre de todos los… algo, pero eso es exactamente lo que los navegadores móviles tienen que hacer si tu no los instruyes de manera específica. Cuando visitas un sitio por medio de un navegador móvil, éste asumirá que estás visualizando una gran experiencia de escritorio y que lo quieres ver todo, no solo la esquina superior izquierda. Éste fijará por tanto el ancho del viewport a (en el caso de Safari en iOS) 980px, calzando todo dentro de su pequeño display.

La Etiqueta Meta Viewport

Ésta es la etiqueta meta viewport, introducida por Apple, luego adoptada y desarrollada más allá por otros.

Se ve de la siguiente manera:

Dentro de content="" puedes ingresar una gran cantidad de valores delimitados por comas, pero vamos a concentrarnos en los fundamentales por ahora.

Por ejemplo, si tu diseño móvil está trazado intencionalmente a 320px, tu puedes especificar el ancho del viewport:

Para layouts flexibles es más práctico basar el ancho de tu viewport en el dispositivo en cuestión, así que para empatar el ancho de tu layout con el del dispositivo ingresarías:

Para estar extra seguro de que tu layout se mostrará como lo planeaste, puedes también fijar el nivel del zoom. Ésto, por ejemplo:

..asegurará que al abrir, tu layout se mostrará correctamente a una escala de 1:1. Ningún zoom será aplicado. Podrías incluso ir más allá y prevenir cualquier zoom por el usuario:

Nota: Antes de aplicar el parámetro de escala-máxima (maximum-scale), considera si realmente debes prevenir que tus usuarios hagan zoom-in. ¿Pueden leer todo tan bien como se pueda?

Usar la etiqueta viewport meta de manera incorrecta puede dificultar a los usuarios con problemas visuales al accesar a tu sitio.

Ponlo Todo Junto

Éstos valores juntos nos dan una gran configuración por default con qué trabajar:

Veamos cómo afecta a nuestro ejemplo

viewport-iphone-correct

Como puedes ver, todo permanece en la escala correcta. El texto se está reacomodando en vez de encogiendo, y nuestro ayudante visual (el encabezado rojo) ha desaparecido.

¡Pero!

Me quito el sombrero ante Jason por señalar ésto en los comentarios. Declarando que el ancho de tu layout es igual al ancho del dispositivo, te toparás con problemas cuando el dispositivo sea usado en landscape. Echa un vistazo a cómo un iPhone 4 maneja nuestro demo, en modo apaisado:

Ruined
Arruinado.

El navegador se siente obligado a hacer zoom-in, para igualar el ancho de la página.

Para solucionar esto, podríamos, como señala Jason, usar JavaScript para seleccionar condicionalmente con cuáles atributos del metatag proceder, pero la solución más simple parece ser simplemente ignorar el width (ancho) del todo. Con solo fijar la initial-scale (escala-inicial) el ancho es inferido. Así es como nuestro nuevo, simplificado demo se muestra en modo apaisado:

Much better
Mucho mejor.

No es el Estándar Que Estás Buscando

La etiqueta meta viewport fue la solución de Apple al problema. Fue adoptada rápidamente por otras plataformas, pero nunca fue presentada por la W3C. Microsoft sacó esto a la luz cuando ellos eligieron ignorar para IE10 ignorar el viewport metatag bajo ciertas circunstancias. En vez de eso, ellos optaron por usar Adaptación CSS a Dispositivos, que es en lo que la W3C se está apoyando.

En pocas palabras, propiedades similares a viewport son definidas dentro de CSS usando la regla @viewport, en lugar de dentro del HTML.

Ó, de acuerdo con nuestro más nuevo acercamiento no especifiques ancho de dispositivo, podríamos fijar lo siguiente:

Dado que es un trabajo en progreso, IE10 requiere la versión prefijada de la proposición, la cual luce algo como esto:

Es una solución mucho más elegante que la metatag, pero está muy lejos de ser totalmente respaldada. Ingresala en tu CSS ahora, para asegurarte de que tu diseño responsive se comporta en IE10 "snap mode (modo quebrar)", y hecha un ojo a su progreso en el futuro. Esto es a donde el control por viewport se dirige.

Puedes leer más acerca de esto en el artículo de Tim Kadlec's, IE10 Snap Mode(Modo quebrar) y Diseño Responsivo..

Conclusión

El diseño responsivo no es solo para la gente que disfruta ver sus navegadores crecer y encogerse, ¡se trata de satisfacer tantos dispositivos diferentes, pantallas y resoluciones como sea posible! Implementa la etiqueta meta viewport en tu <head>, más la regla @viewport en tu CSS cuando estés construyendo layouts flexibles y estás listo para seguir.

Lecturas Adicionales

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.