Adaptando una web al iPhone/iPod Touch
glpunzi | 21 Febrero, Jueves, 2008 | 11:53 amHasta hace poco, me encontraba con un problema con una web que tenemos para unas PDA’s, ya que Safari, aplicaba un “Zoom Out” que hacía que la web se viese super enana.
En esta entrada, explicaré brevemente cómo hemos solucionado este problemilla de una manera, mucho más sencilla de lo que pensábamos, y además lo pongo al público en español, ya que yo al menos, no encontré nada claro por la web.
Por supuesto, todos los méritos van para Apple, gracias a la estupenda documentación (bien estructurada, clara, y con ejemplos de la vida real) que tienen en su web, y es la que nos ha sacado del problema.
Todo lo que encontraba sobre éste tema, eran plugins para wordpress por ejemplo, que automatizan este proceso, y que no explicaban exactamente lo que hacen. También es verdad, que no me maté a buscar, debido a la urgencia, pero mira tú por donde, se ha solucionado.
Vamos allá
En la oficina, tenemos una pequeña aplicación web (adaptada a pantalla de PDA, 320px), que conecta a nuestros terminales táctiles Toshiba, como comanderos. Compramos un iPod Touch para ver si nos servía. Buena batería, WIFI rápido, y un diseño más que elegante (a falta de una funda protectora), son unas características que hacen del iPod Touch, un terminal perfecto para estos propósitos.
Resulta, que el navegador Safari que incorpora, por defecto, escala todas las webs a un ancho de 980 píxeles (siendo 320px el ancho óptimo del terminal), por lo que la visibilidad de la página, era más que nula sin hacer un zoom, que si bien, es super sencillo de hacer, no es factible teniéndolo que hacer cada dos por tres, y donde prima la velocidad.
En esta imágen podéis observar (por el cuadro negro), como se vería una web con un ancho de 320px en la pantalla del iPod/iPhone
Apple, empresa que debería responder al lema “Las cosas bien hechas”, tiene una estupenda documentación en línea sobre el diseño de webs para este precioso gadget. Y en el apartado de Changing the Viewport Width and Height, tenemos una solución más que aceptable, el simple añadido de una etiqueta a las cabeceras de las webs.
Izquierda: Sin etiqueta META Derecha: Con etiqueta META
Estas dos imágenes representan la carga por defecto de la misma web desde Safari. A la izquierda, accede de manera “normal”. A la derecha, en el header de la página, se ha incluido la siguiente etiqueta:
<meta name = "viewport" content = "width = 320">
Esta etiqueta, lo que ha hace es especificarle a Safari, que la página está optimizada para una anchura de 320, et voilá, problema solucionado.
Espero que esta información os sea de utilidad.
La documentación es accesible también desde un PDF descargable
Las imágenes son propiedad de Apple, enlazadas directamente hacia su documentación.
Entradas relacionados:
Comentarios recientes