JSまたはJQueryでデバイスの向きに基づいてimg srcを動的に編集

Question

私は、WebKitパワードビュー（Mobile Safariのクロムレスバージョン）にHTMLドキュメントを読み込むiOSマガジンフレームワーク（PugPig）を使用しています。

それぞれの「ページ」には、デバイスの向きに応じて、<のポートレートまたはランドスケープバージョンをimg/>にロードします。さまざまな理由から、CSSの背景画像ではなく< img/>でなければならないため、メディアクエリは機能しません。私はローカルデバイスからHTMLをロードしているので、Webサーバーのものは使用できません。

私はJSが行く方法だと推測していますが、ページのリフレッシュなしで、方向変更（または少なくとも画面幅）を検出する必要があり、これが可能かどうかわかりません。

JSにはあまり慣れていないので、サンプルコードはありません（これまでのすべての試みは車のクラッシュです）。ごめんなさい。

ご迷惑をおかけして申し訳ございません。

Answer 1

OK、結局のところ、imgのdisplayプロパティを設定することで、CSS Media Queriesを使用したソリューションが見つかりました。ファッジのビット、しかし、今は大丈夫。

私は基本的に2つのdivを作成しました.1つは「ランドスケープ」ID、もう1つは「ポートレート」であり、絶対的にお互いの上に配置されています。次に、@mediaクエリを使用してdisplay：プロパティを使用して該当するdivを表示/非表示にしました。非常に不器用で、ウェブにはまったく適していませんが、メモリから直接データを読み込むiPadアプリでも問題ありません。そして、これは "反応的なイメージ"が事になった前であった。

Answer 2

jQuery mobileさんのorientationchangeeventsを試しましたか？

私は決してこれをやったことはありませんが、あなたはこのように行くことができます。