Editar dinámicamente IMG SRC basado en la orientación del dispositivo con JS o JQuery

Question

Estoy trabajando con un marco de la revista iOS (Pugpig) que carga documentos HTML en una vista alimentada por WebKit (una versión sin cromo de Safari móvil).

Me gustaría que cada 'página' cargue una versión de retrato o paisaje de unu003Cimg/> dependiendo de la orientación del dispositivo. Por varias razones tiene que ser unu003Cimg/> En lugar de una imagen de fondo CSS, por lo que las consultas de los medios no funcionarán. Debido a que estoy cargando HTML desde el dispositivo local, tampoco se pueden usar cosas del servidor web.

Así que supongo que JS es el camino a seguir, pero necesitaría detectar el cambio de orientación (o al menos el ancho de la pantalla) sobre la marcha, sin una actualización de la página, y no sé si esto es posible.

No está muy familiarizado con JS, por lo tanto, no hay código de muestra (todos mis intentos hasta ahora son accidentes automovilísticos). Lo siento.

Cualquier ayuda muy apreciada.

Answer 1

Ok, encontré una solución utilizando consultas de medios CSS después de todo, configurando la propiedad de visualización del IMG. Un poco de dulce de azúcar, pero bien por ahora.

Básicamente, creé dos divs, uno con una identificación de 'paisaje' y otro con 'retrato', colocado absolutamente uno encima del otro. Luego usado @media Consultas para mostrar/ocultar el DIV relevante con la PRIPTIVA: Propiedad. Muy torpe, no es adecuado para la web, pero está bien para una aplicación para iPad que carga los datos directamente desde la memoria. Y esto fue antes de que las "imágenes receptivas" se convirtieran en una cosa.

Answer 2

Has probado jQuery mobile's orientationchange eventos?

Nunca he hecho esto, pero parece que podrías ir por este camino.