デバイスの向きに応じて画像を変更する

Question

私は地元の会社のPhoneGapを使用して基本的なWebアプリケーションを構築しています。私は、ヘッダー/バナーの2つの画像をアプリケーションの上部に作成しました。 1つは縦向きに最適化され、1つは横向きに最適化されています。 デバイスがどのように保持されているかに応じてどちらかを表示したい。私はJQueryモバイルが私のために機能の残りの部分を処理するので、私はメディアの問い合わせについて、そして率直に言って私のニーズを少し複雑にしています。私はアプリ全体に対して1つのCSSしか使用しません。

誰かがこの問題を解決するために追加できる簡単なコード行をいくつか持っていますか？

Answer 1

あなたは縦と横方向のためのCSSメディアクエリを使用することができ、それは全く複雑ではありません。

@media screen and (orientation: portrait) { ... } 
@media screen and (orientation: landscape) { ... } 

あなたが任意の方向についてbackground-imageを上書きすることができ、これらのメディアクエリを使用しました。

公式ドキュメント：http://www.w3.org/TR/css3-mediaqueries/#orientation

それを使用しての2つの方法があります。

推定するが、あなたはクラスheaderで<div>を持っている：

@media screen and (orientation: portrait) 
{ 
    div.header { background-image:url(image1.jpg); } 
} 
@media screen and (orientation: landscape) 
{ 
    div.header { background-image:url(image2.jpg); } 
} 

また、あなたが<img>タグを使用することもできます。この場合、2つが必要で、CSS規則で1つのみを表示/非表示にします。 <img>タグは、それぞれのクラスheader-landとheader-portraitを持っている、のは、言ってみましょう：

@media screen and (orientation: portrait) 
{ 
    .header-land { display:none; } 
    .header-portrait { display:inline-block; } 
} 
@media screen and (orientation: landscape) 
{ 
    .header-land { display:inline-block; } 
    .header-portrait { display:none; } 
} 

Answer 2

は、これはメディアクエリを使用する方法についての答えが、それは問題を解決するために非常に簡単な方法です。しかし、一つの前提条件は、それがCSSの背景として画像を表示するために大丈夫だということで、擬似コード

.my-banner { 
    ...declarations like: 
    background-position: 
    border: 
    margin: 
    padding: 
} 
@media all and (max-width: 320px) { 
    .my-banner { 
    background-image: url(portrait.png); 
} 
@media all and (min-width: 321px) { 
    .my-banner { 
    background-image: url(landscape.png); 
}