2

iPhone 5 および iPad 4 OSの場合、 @mediaクエリが機能しません。次のCSSを使用して、各 OS とデバイスをさまざまな画面に合わせてスタイリングしました。

iPad と iPhone の幅と高さを明示的に確認し、それに基づいてメディア クエリのみを保持しました。これは、ANDROID OS で正常に動作します。

/*@media print {*/
/* iPhone 5 (Portrait) */
@media screen and (max-device-height: 568px) and (orientation: portrait) {
     #map_canvas {
        border: 1px dashed #C0C0C0; 
        width: 290px;
        height: 473px;
      }
}

/* iPad 4 (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 735px;
    height: 929px;
  }
}

/* iPad 4 (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
  #map_canvas {
    border: 1px dashed #C0C0C0;
    width: 990px;
    height: 673px;
  }
}

/* Samsung 10.1 inch (Portrait) */
@media screen and (max-device-height: 1280px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 790px;
    height: 1140px;
  }
}

/* Samsung 10.1 inch (Landscape) */
@media screen and (max-device-width: 1280px) and (orientation: landscape) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 1230px;
    height: 680px;
  }
}

/* Samsung 7.0 inch (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
 #map_canvas {
    border: 1px dashed #C0C0C0; 
    width: 570px;
    height: 875px;
  }
}

/* Samsung 7.0 inch (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
  #map_canvas {
    border: 1px dashed #C0C0C0;
    width: 990px;
    height: 455px;
  }
}

@media all and (orientation: landscape) {
  html, body {
    height: auto;
  }
}

上記のコードでさまざまな変更を加えてテストするたびに、スタイルを適用するために参照されている最後の CSS を取得しています。

リンクを 1 つ見つけました (まだ試していませんが、Mac が利用可能になったらすぐに試す予定です) が、それについても質問があります ( iphone/ipad メディア クエリの問題)。この場合、ピクセル比は重要ですか?

4

2 に答える 2

4

https://mislav.net/2010/04/targeted-css/より抜粋

オリエンテーション メディア クエリは、iPad ではサポートされていますが、iPhone では機能しないことに注意してください (v3.1.3 でテスト済み)。幸いなことに、width や device-width などのサイズ クエリが機能するため、JavaScript を使用しなくても、それらを組み合わせてレイアウトを切り替えることができます。

于 2013-02-11T18:21:20.377 に答える
3

その理由は、新しい Apple デバイスのピクセル比密度が高いためです。ドキュメントの head にこのメタ タグを配置すると、メディア クエリがどこでも機能します。

<meta name="viewport" content="width=device-width">

ちなみに、アップルの新製品で画素比率が高い方を「Retinaディスプレイ」と呼んでいます。

iPhone、iPad などにアクセスできる場合は、次の Web サイトを表示してみてください。

http://mattstow.com/viewport-size.html

これらのデバイスで、デバイスのビューポート サイズを確認します。次に、メタ タグを追加すると、ビューポートのサイズが変化することがわかります。

于 2013-02-11T18:20:36.413 に答える