Resulta que estoy haciendo una versión especial para el iPhone de un proyecto – que les anunciaré la próxima semana– y me topé con un problema: las imágenes cuyas dimensiones exceden el ancho de la pantalla aparecen mochas y sin ninguna forma de hacer scroll.

¿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.