web-dev-qa-db-ja.com

1つのメディアクエリでiPhone 3GSとiPhone 4をターゲットにする方法は？

IPad/iPhoneと古いiPhoneの両方に代替レイアウトを実装しようとしています。

最良の方法は@media CSS3仕様から。

そのようなものとして、これらは今のところ私のメディアクエリです：

@media screen and (max-width: 1000px) { ... }

上記は、小さなデスクトップおよびラップトップ画面用です。

@media screen and (max-width: 700px) { ... }

上記はiPadと非常に小さなデスクトップ/ラップトップ画面用です。

@media screen and (max-device-width: 480px) { ... }

上記は、一般的なiPhone 3GSおよびモバイルデバイス用です。

ただし、スティーブ・ジョブズのすべてを歌うすべてが踊る「レチナ」ディスプレイを備えた新しいiPhone 4では、ピクセル比が2-1であり、1ピクセルが実際にブラウザに2x2ピクセルとして表示され、解像度（960x640-モバイルデバイスレイアウトではなくiPadレイアウトをトリガーします）、これには別のメディアクエリが必要です（これまではWebkitでのみサポートされています）：

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

今、私は...素敵な光沢のある新しいiPhone 4レイアウトがiPhone 3GSとモバイルデバイスレイアウトに統合され、両方ともまったく同じ内部CSSコードを持っているので、

したがって、私の質問をします。

@media iPhone 4、3GS、および他のモバイルの両方を同じスタイルに向けるルール？

iphonecsscss3mobile-safarimedia-queries
50
Myles Gray

IPhoneとiPod touchはmax-device-width Retinaディスプレイでも物理ピクセルではなく論理ピクセルで（必要に応じて）、iPhoneに使用される元のメディアクエリで十分です。

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

必要なのは(-webkit-min-device-pixel-ratio: 2) Retinaディスプレイを個別にターゲットにする必要がある場合。

55
BoltClock

BoltClockの答えは、現時点ではかなり良いようです。

ただし、将来的に考えて、Apple（または別のメーカー）がデバイスピクセル比2の別のデバイスをリリースした場合、このメディアクエリはこのデバイスにも使用されます。

これが起こることや、網膜ディスプレイを搭載したiPadのように、新しいデバイスがはるかに大きな画面を持つことを想定することは問題外ではないと思います。

このクエリをiPhone 4および以前のiPhone（および同様のサイズの他のデバイス）にのみ適用可能にするには

@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
}

現在、[[IPHONE_4_WIDTH]]がわからない-持っていない、そしていくつかのサイトは 48 と言って、いくつかは 96 と言っている。両方に置き換えてみてください。 （そして、あなたが見つけたものを教えてください:)）

6
mattbilson

私は、リクエストの2番目の部分ごとにiPhone 3/3GSを明確にターゲットにする方法を探していました。私が見つけた最も受け入れられる解決策は、iPhone 3の固定パラメーターにメディアクエリを調整することです。

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

このクエリを機能させるには、Safariの viewportメタタグ を使用してブラウザを100％に修正する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

少数のAndroidそのクエリでも取得される携帯電話があります。Android潜在的な画面でアクティブな携帯電話の18.4％を示す市場サイズの範囲は320x480で、その一部のみが、標準のWebkitブラウザーのデバイスピクセル比に一致します。

電話解像度のリスト

すべての情報は投稿日時点で考慮されました。

また、彼の投稿に対するmernenのコメント＃2によると、ターゲットとするドキュメントはAndroidピクセル密度によるデバイス： http://developer.Android.com/guide/webapps/targeting。 html＃DensityCSS

5
dalethedeveloper

私はあなたの質問に従うかどうかわかりません。 iPhone 4でクエリを試しましたか？ device-widthは物理的なピクセルではなく論理的なピクセルで測定されるため、iPhone 4は依然として最大デバイス幅：480pxの基準に適合しています。

ハイエンドAndroidピクセル比1.5のスマートフォンについても同様です。NexusOneの物理画面は480x800、論理画面は320x533です。

4
mernen