1

jQuery Mobile と PhoneGap で作成された Android モバイル アプリがあります。デバイスと向きに応じて、3 つの個別のレイアウトが必要です。

  1. 縦向きの電話 - 常に縦向きのレイアウトを使用したいスマートフォンで
  2. 縦向きのタブレット - スマートフォンとは異なります
  3. 横向きのタブレット

これは CSS メディア クエリで実現できますか? レイアウトの変更が可能であることは知っていますが、縦向きのレイアウトをスマートフォンのみに強制し、同時にタブレットの横向きを許可する方法がわかりません。

4

1 に答える 1

1

ほとんどのデバイスは次の 3 つの解像度に分類されます。
1) HVGA - VGA の半分 (320 x 240)
2) WVGA - ワイド VGA (800 x 480) - HVGA のほぼ 1.5 倍
3) HVGA 2x - (640 X 960) - IPHONE 4 はこの解像度を使用します

要件
1) および 2) については、以下のように @media 内にスタイルを記述できます。HVGA または WVGA を使用できます。必要に応じて幅と高さを変更します

@Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}

3)横向きビューの場合、以下の例のように orientation:landscape を使用します

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
/* css files here */
}

コード部分は参照用です。ニーズは異なる場合があります。必要に応じて、screen/only、min-device-pixel-ratio、max-device-pixel-ratio などのパラメータを変更してください

于 2012-12-07T13:42:07.563 に答える