Prepara tu página para el iPad

via aNieto2K by aNieto2k on 4/3/10


Bueno, parece que poco a poco los dispositivos táctiles comienzan a invadirnos. Algo que era de esperar, despues de la aceptación que tanto el iPhone como dispositivos Android están teniendo en el mercado móvil. Poco a poco estas herramientas empezarán a estar sobre los sofás de cualquier geek. Por este motivo no parece descavellado revisar un poco nuestro código para que nuestras páginas se adapten a la nueva resolución de pantalla que el iPad usará.

¿Que necesitamos saber?

Apple, como ya hizo con su iPhone, nos ha facilitado una serie de recomendaciones e información referente al iPad para que los desarrolladores web no tengamos muchos problemas en la adaptación.

Viewport

Si para la versión de tu web para el iPhone indicaste un viewport con un valor fijo en pixels tendrás que cambiarlo ya que la nueva versión dispone de una variable que indica el tamaño del dispositivo y nos evita tener que intuirlo o detectarlo nosotros mismos.

// Antes <meta name="viewport" content="width=320" /> <!--- WRONG //---> // Ahora <meta name="viewport" content="width=device-width" />

Solucionando posiciones fixed CSS

El conocido position:fixed; no funciona de igual forma en Safari, iPhone e iPad por ese motibo debemos tener especial cuidado al usarlo. En Safari (sobre OSX y Windows) siempre mantiene el elemento fixed en pantalla, sobre iPhone e iPad esto no ocurre ya que el usuario puede ampliar o reducir la página haciendo que el elemento salga del foco visible. El posicionamiento fijo usa el visor como bloque de contención para estos elementos fixed. En Safari, al redimensionar la pantalla todo se redimensiona, en el iPhone/iPad no podemos reducir la pantalla, únicamente podemos atacar al contenido y este si puede crecer o decrecer.

User Agent

El nuevo User-Agent que tendremos que conocer será el siguiente:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

¿Como testear con Safari en nuestro sobremesa?

Usando el anterior User-Agent, podemos especificarle a Safari que nos identifique con si de un iPad se tratara. Simplemente tendremos que acceder al menú Desarrollo  (sinó lo tenemos, lo activamos desde Preferencias > Advanzado > “Mostrar el menú Desarrollo en la barra de menús”) e indicamos el user-agent del iPad en Desarrollo > Agente de usuario > Otra…

safari-ipad (Ver Imagen)

Resultado

Usándo esta configuración en Safari podemos disfrutar de la versión iPad en nuestro gMail, por ahora solo en Safari, no he probado con ningún plugin que cambie el User-Agent de Firefox.

gmail-ipad (Ver Imagen)

Ya no hay excusas 😀

aNieto2k

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: