8

地元の会社向けに PhoneGap を使用して基本的な Web アプリを構築しています。アプリの上部にあるヘッダー/バナー用に 2 つの画像を作成しました。1 つは縦方向に最適化され、もう 1 つは横方向に最適化されます。デバイスの持ち方によってどちらかを表示できるようにしたいです。私はメディアクエリについて読んでいますが、率直に言って、JQueryモバイルが残りの機能を処理してくれるので、私のニーズには少し複雑すぎます.App全体で1つのCSSしか使用していません.

この問題の解決に役立つ簡単なコード行を追加できる人はいますか?

4

2 に答える 2

8

縦向きと横向きの CSS メディア クエリを使用できますが、まったく複雑ではありません。

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

background-imageこれらのメディア クエリを使用すると、任意の向きをオーバーライドできます。

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

使用方法は 2 つあります。

<div>classを持っていると仮定しますheader:

@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; }
}
于 2013-01-02T09:43:39.410 に答える
0

これは、メディア クエリの使用方法に関する回答です。問題を解決するための非常に簡単な方法です。ただし、前提条件の 1 つは、画像を CSS の背景として表示しても問題ないことです。<img ... />

疑似コード

.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);
}
于 2013-01-02T09:49:32.760 に答える