Usando la etiqueta meta viewport para controlar la composición en los navegadores móviles

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El próximo lanzamiendo de Mobile Firefox (Fennec) 1.1 se han mejorado características para el soporte de la etiqueta <meta name="viewport">. Versiones anteriores de Fennec soportaban las propiedades de viewport width, height, y initial-scale, pero hubo problemas con algunos sitios diseñados para navegadores de iPhone y Android. Ahora soportamos las mismas propiedades que Mobile Safari, y tambien hemos cambiado Fennec para renderizar los sitios web móviles de manera más consistente en pantallas de diferentes tamaños y resoluciones.

touch.facebook.com antes:

05-11-fennec-meta-viewport-2.png

touch.facebook.com después:

05-11-fennec-meta-viewport-1.png

Puedes ver esos cambios por ti mismo en el último Fennec 1.1 y trunk de nightly builds para Maemo, Windows, Mac, o Linux.

Antecedentes

Navegadores móviles como Fennec muestran ("render": renderizan) las páginas en una "ventana" virtual  (El viewport), usualmente más amplia que la pantalla, para de esta forma no tener que apretar cada diseño de página en una ventana diminuta (lo que rompería muchos sitios no optimizados para móvil). Los usuarios pueden hacer zoom y vista panorámica para ver distintas áreas de la página.

Mobile Safari introdujo la meta-etiqueta "viewport" para permitirle a los desarrolladores controlar el tamaño y la escala del viewport. Ahora, muchos otros navegadores móviles soportan ésta etiqueta, aunque no sea parte de ningún estándar web. La documentación de Apple (Apple's documentation) hace un buen trabajo al explicar la forma en que los desarrolladores web pueden usar esta etiqueta, sin embargo tuvimos que hacer algún trabajo de detectives para descifrar exacamente cómo implementarla en Fennec. Por ejemplo, la documentación de Safari dice que el contenido es una "lista delimitada por comas", pero los navegadores existentes y páginas web usan cualquier mezcla de comas, puntos y coma, y espacios como separadores. 

Aprende más sobre viewports en diferentes navegadores móviles en A Tale of Two Viewports at quirksmode.org.

Viewport básico

Un típico sitio optimizado para móvil contiene algo así:

<meta name="viewport" content="width=device-width, user-scalable=no">

La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles como  width=600 o con un valor especial device-width que es el equivalente al ancho de la pantalla en píxeles CSS pixels en una escala de 100%. (Existen valores correspondientes de heightdevice-height, los cuales pueden ser útiles para páginas con elementos que cambian tamaño o posición basadas en la altura del viewport (height).

La propiedad initial-scale controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades maximum-scale, minimum-scale, y user-scalable controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página.

Un pixel no es un pixel

El iPhone y muchos teléfonos Android populares tienen pantallas de 3 a 4 pulgadas (7–10 cm) con 320—480 píxeles (~160 dpi). Firefox para Maemo se ejecuta en el Nokia N900, el cual físicamente tiene el mismo tamaño, pero 480—800 píxeles (~240 dpi). Debido a esto, la versión más reciente de Fennec mostró muchas páginas alrededor de un tercio más pequeñas (en tamaño real, tamaño físico) que iPhone o Android. Esto causó problemas de usabilidad y lectura en muchos sitios web optimizados con funcionalidad touch. Peter-Paul Koch escribió sobre este problema en A pixel is not a pixel is not a pixel.

Fennec 1.1 para Maemo usa 1,5 pixels de hardware para cada "pixel" de CSS, siguiendo los criterios de los navegadores en Android basados en WebKit. Esto significa que una página con un valor de  initial-scale=1 se mostrará renderizada aproximadamente al mismo tamaño físico en Fennec para Maemo, Safari Mobile para iPhone, y el navegador de Android tanto en teléfonos  HDPI y MDPI. Esto es consistente con la especificación CSS 2.1, que dice:

Si la densidad en pixeles del aparato es muy diferente de aquella típica en pantalla de computadores, el "user agent" deberá reescalar los valores en pixeles. Se recomienda que la unidad de pixel refiera al número total de pixels del aparato que más se aproxime al pixel de referencia. Se recomienda también que el pixel de referencia sea el ángulo visual de un pixel en un aparato con una densidad de pixels de 96dpi y una distancia del lector del largo de un brazo.

Para los desarrolladores web, esto supone que 320px es el ancho máximo en modo retrato a scale=1, y todos los dispositivos mencionados anteriormente, deben ajustarse acorde al tamaño la maquetación y las imágenes. Pero recuerda que no todos los móviles tienen el mismo ancho; debes asegurarte además que tus páginas funcionan corectamente en modo apaisado, y en dispositivos más grandes como el iPad o las tablets Android.

En las pantallas de 240-ppp, las páginas con initial-scale=1 serán escaladas efectivamente a un 150% tanto en Fennec como en Android WebKit. Su texto será suave y fresco, pero sus imágenes de bitmap probablemente no obtengan ninguna ventaja de la máxima resolución de la pantalla. Para obtener imágenes más finas en estas pantallas, los desarrolladores web deben diseñar imágenes - o maquetaciones completas - al 150% de sus tamaño final (o al 200%, para soportar dispositivos de 320-ppp como por ejemplo el iPhone con pantalla retina) y entonces disminuar la escala usando CSS o las propiedades del viewport.

La relación por defecto depende de la densidad de la pantalla. En una pantalla con una densidad inferior a 200ppp, el ratio es 1.0. En pantallas con densidades entre 200 y 300ppp, el ratio es 1.5. Para pantallas con densidades por encima de 300ppp, el ratio es el entero inferior (densidad/150ppp). Hay que observar que el ratio por defecto es cierto sólo cuando la escala del viewport es igual a 1. En cualquier otro caso, la relación entre los pixels en CSS y en el dispositivo dependen del nivel de zoom en cada momento.

Ancho del viewport y ancho de la pantalla

Muchos sitios establecen su viewport a "width=320, initial-scale=1" para ajustarse de manera precisa a la pantalla del iPhone en modo portrait. Tal y como se menciona arriba, esto causa problemas cuando Fennec 1.0 renderiza estos sitios, especialmente en modo landscape. Para arreglar esto, Fennec 1.1 expandirá el ancho del viewport si es necesario para rellenar la pantalla a la escala requerida. Esto encaja con el comportamiento de Android y Mobile Safari, y es especialmente útil en dispositivos de gran pantalla como el iPad (el sitio de Allen Pike Choosing a viewport for iPad tiene una buena explicación para desarrolladores web).

Para páginas que establecen una escala inicial o máxima, esto se traduce en que la propiedad width realmente pasa a ser el ancho mínimo del viewport. Por ejemplo, si tu diseño necesita al menos 500 píxeles de ancho entonces  podrás usar la siguiente anotación. Cuando la pantalla tenga un ancho mayor a 500 píxeles, el navegador extenderá el viewport (en lugar de acercar el zoom) para ajustarlo a la pantalla:

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

Fennec 1.1 también añade soporte para minimum-scale, maximum-scale y user-scalable con valores por defecto y límites similares a los de Safari. Estas propiedades afectan a la escala inicial y al ancho, además de limitar los cambios a nivel de zoom.

Los navegadores para dispositivos móviles responden a los cambios de orientación de manera ligeramente diferente. Por ejemplo, Mobile Safari a menudo solo amplía el zoom de la página cuando se cambia la orientación portrait a la landscape, en lugar de exponer la página como si originalmente se hubiera cargado en landscape. Si los desarrolladores web quieren que su escala establecida permanezca consistente cuando cambie la orientación en un iPhone, deben añadir un valor maximum-scale para prevenir éste efecto de zoom, el cual tiene el (a veces) efecto secundario indeseado de impedir que los usuarios acerquen el zoom:

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

Esto no es necesario en Fennec; cuando el dispositivo cambia de orientación, Fennec actualiza el tamaño de viewport, el diseño de la página, y las propiedades de  JavaScript/CSS como device-width, basadas en las nuevas dimensiones de la pantalla.

Tamaños Comunes de Viewport en Equipos Móviles y Tabletas 

Si quieres saber qué tipo de ancho de viewport tienen los equipos móviles y tabletas, hay una lista exhaustiva aquí: mobile and tablet viewport sizes. La lista te brinda información tanto del ancho del viewport en los modos de orientación vertical y horizontal ("portrait" y "landscape"), así como del tamaño de la pantalla, sistema operativo y la densidad de píxeles del dispositivo.

Standards

Specification Status Comment
CSS Device Adaptation
The definition of '<meta name="viewport">' in that specification.
Working Draft Non-normatively describes the Viewport META element

Claramente existe demanda por la etiqueta "meta viewport", ya que es soportada por la mayoría de los buscadores móviles y usada por miles de sitios web. Sería bueno contar con un verdadero estándar para que las páginas web puedan controlar las propiedades del viewport. Mientras avance el proceso de estandarización, en Mozilla trabajaremos para asegurarnos de poder implementar cualquier cambio realizado durante dicho proceso.

Etiquetas y colaboradores del documento

 Última actualización por: jafcalvente,