Modifier dynamiquement IMG SRC en fonction de l'orientation de l'appareil avec JS ou JQuery

Question

Je travaille avec un framework de magazine iOS (PUGPIG) qui charge les documents HTML dans une vue alimentée par webkit (une version sans chrom de safari mobile).

J'aimerais que chaque «page» charge soit une version portrait ou paysage d'unu003Cimg/> en fonction de l'orientation de l'appareil. Pour diverses raisons, ce doit être unu003Cimg/> Plutôt qu'une image d'arrière-plan CSS, les requêtes multimédias ne fonctionneront pas. Parce que je charge HTML à partir du périphérique local, aucun truc de serveur Web ne peut être utilisé non plus.

Je suppose donc que JS est la voie à suivre, mais il faudrait détecter le changement d'orientation (ou au moins la largeur d'écran) à la volée, sans rafraîchissement de page, et je ne sais pas si cela est possible.

Pas très familier avec JS, donc aucun exemple de code (toutes mes tentatives jusqu'à présent sont des accidents de voiture). Pardon.

Toute aide très appréciée.

Answer 1

OK, j'ai trouvé une solution utilisant les requêtes multimédias CSS après tout, en définissant la propriété d'affichage de l'IMG. Un peu de fudge, mais bien pour l'instant.

Fondamentalement, j'ai créé deux divs, un avec une pièce d'identité «paysage» et une autre avec «portrait», positionné absolument les uns sur les autres. Puis utilisé @media requêtes pour afficher / masquer la div pertinente avec l'affichage: propriété. Très maladroit, pas du tout adapté au Web, mais bien pour une application iPad, chargeant des données directement à partir de la mémoire. Et c'était avant que les "images réactives" ne deviennent une chose.

Answer 2

As-tu essayé jQuery mobile's orientationchange événements?

Je n'ai jamais fait cela, mais il semble que vous puissiez y aller.