¿Les ha pasado? Están de suerte, pues descubrí una manera muy simple de solucionarlo con solo un poquito de jQuery.

Primero, asumo que están desplegando estilos exclusivamente para iPhone (y otros dispositivos móviles) más o menos así:

Cómo ven, estoy aplicando una propiedad max-width de 300px (nota al margen: estoy utilizando max-width ¿No es hermosa la vida cuando no hace falta pensar en Internet Explorer?) lo cual funciona bastante bien suponiendo que el dispositivo siempre este en modo vertical (mi forma favorita de navegar en el iPhone/iTouch) pero si por alguna razón el usuario pone el aparato en formato horizontal, entonces el ancho de la pantalla pasa de 320px a 480px, donde nuestras imágenes se ven demasiado pequeñas.

Una cosa notable, sin embargo, es que cambiar de vista vertical a horizontal y viceversa lanza el evento resize del navegador, el cual podemos cachar desde javascript para redimensionar nuestras imágenes.

¿Existe la palabra “redimensionar”?

Bueno, este es el pequeño snippet de jQuery que yo utilicé para redimensionar las imágenes acorde al tamaño del viewport. Espero que les sea de utilidad:

Nótese que lo que cambiamos con jQuery es la propiedad max-width y no width, así evitamos que, si la imagen ya es más pequeña que el viewport, ésta se deforme.

P.D. Aún queda un problema que no se como solucionar: No es posible acercarte a las imágenes haciendo el gesture de pinch/zoom. Si tienen la respuesta a este enigma y quieren compartirla, por favor haganlo.

Curiosamente no ha hecho tanto ruido como yo esperaba, jQuery, Prototype y MooTools siguen siendo las herramientas favoritas de muchos de nosotros. Pero viendo esto que están desarrollando, creo que esto puede cambiar en cualquier momento: Atlas, un IDE de desarrollo 100% WYSIWIG corriendo en el navegador

Aqui les dejo un video para qe lo vean en acción:

En fin, la demo me parece increíble y me dan ganas de crear algo así.

Video en Youtube