Modifica dinamicamente IMG SRC in base all'orientamento del dispositivo con JS o jQuery

Question

Sto lavorando con un Framework IOS Magazine (Pugpig) che carica i documenti HTML in una vista alimentata a Webkit (una versione cromata di Safari mobile).

Vorrei che ogni "pagina" carichi una versione di un ritratto o del paesaggio di unu003Cimg/> a seconda dell'orientamento del dispositivo. Per vari motivi deve essere unu003Cimg/> Piuttosto che un'immagine di sfondo CSS, quindi le query multimediali non funzionano. Poiché sto caricando HTML dal dispositivo locale, non è possibile utilizzare alcun problema con server Web.

Quindi immagino che JS sia la strada da percorrere, ma dovrebbe rilevare il cambiamento di orientamento (o almeno la larghezza dello schermo) al volo, senza un aggiornamento della pagina, e non so se ciò sia possibile.

Non enormemente familiarità con JS, quindi nessun codice di esempio (finora tutti i miei tentativi sono gli arresti dell'auto). Scusate.

Qualsiasi aiuto molto apprezzato.

Answer 1

OK, dopo tutto ho trovato una soluzione utilizzando le query multimediali CSS, impostando la proprietà di visualizzazione dell'IMG. Un po 'di un fondente, ma per ora.

Fondamentalmente ho creato due div, uno con un ID "paesaggio" e un altro con "ritratto", posizionato assolutamente l'uno sull'altro. Quindi usato @media query per mostrare/nascondere il Div pertinente con il display: proprietà. Molto goffo, per niente adatto al Web, ma va bene per un'app iPad che carica i dati direttamente dalla memoria. E questo era prima che le "immagini reattive" diventassero una cosa.

Answer 2

Hai provato jQuery mobile'S orientationchange eventi?

Non l'ho mai fatto, ma sembra che potresti andare così.