51

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) { ... }

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

ただし、SteveJobsのすべて歌うすべて踊る「Retina」ディスプレイを搭載した新しいiPhone4は、ピクセル比が2-1であることを意味します。つまり、1ピクセルは実際には2x2ピクセルとしてブラウザに表示され、解像度（960x640-モバイルデバイスのレイアウトではなくiPadのレイアウトをトリガーする）ので、これには別のメディアクエリが必要です（これまでのところ、Webkitでのみサポートされています）。

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

さて、問題は...私は私の素敵な光沢のある新しいiPhone4レイアウトをiPhone3GSとモバイルデバイスのレイアウトと融合させたいと思っています。どちらもまったく同じ内部CSSコードを持っているからです。

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

@mediaiPhone 4、3GS、その他の携帯電話の両方を同じスタイルにポイントするルールを作成するにはどうすればよいですか？

4

4 に答える 4

56

iPhone と iPod touchmax-device-widthは、Retina ディスプレイを使用しても物理ピクセルではなく論理ピクセルで測定されるため (そうあるべきです)、iPhone に使用された元のメディア クエリで十分なはずです。

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

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

于 2011-02-17T16:20:25.583 に答える
7

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

ただし、将来のことを考えると、Apple (または別のメーカー) がデバイス ピクセル比 2 の別のデバイスをリリースした場合、このメディア クエリはこのデバイスにも使用されるでしょう。

これが起こると仮定することは問題外ではないと思います.Retinaディスプレイを備えた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]] は今のところ不明です - 私にはありません。一部のサイトでは480と表示され、一部のサイトでは960と表示されています。両方交換してみてください。（そして、あなたが見つけたものを教えてください:)）

于 2011-10-19T02:28:32.627 に答える
6

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

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

このクエリを機能させるには、 Safari のビューポート メタ タグを使用して、次のようにブラウザを 100% に固定する必要があります。

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

そのクエリでも取り上げられる少数の Android フォンがあります。Android マーケットでは、320x480 の潜在的な画面サイズ範囲でアクティブな電話の 18.4% が示されていますが、そのサブセットのみがストック Webkit ブラウザーのデバイス ピクセル比と一致します。完璧ではありませんが、何もないよりはましです。

電話解決のリスト

すべての情報は、投稿日現在のものと見なされます。

また、mernen の投稿に対するコメント #2 に従って、ピクセル密度で Android デバイスをターゲットにするドキュメントを以下に示します: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

于 2012-02-21T20:24:03.703 に答える
5

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

ピクセル比が 1.5 のハイエンド Android スマートフォンにも同じことが言えます。Nexus One の物理画面は 480x800、論理画面は 320x533 です。

于 2011-02-21T13:09:14.570 に答える