iphone4をレスポンシブデザイン（cssメディアクエリ）でターゲット設定しているように、

Question

これまでに回答している必要がありますが、関連する質問が見つかりません。

私はレスポンシブサイトを設計しました.cssのメディアクエリは、320ワイドに正しく表示されるようにすべて下がっています。

私が望むのは、iPhone4（640 x 960）がポートレートモード（640ワイド）で、ディスプレイ幅= 320ピクセルであるかのようにメディアクエリを遵守したい場合です。理論的根拠：iphoneのピクセル数が増えても、高密度ではない携帯電話のユーザーと同様に、単純なレイアウトをそのユーザーに表示したいと考えています。

これらの高画素密度の携帯電話にいくつかのメタタグを指定するなど、これを行う方法はありますか？

もちろん、私はmin-device-pixel-ratio: 2でiphone 4などのメディアクエリを個別に定義できますが、これは本質的に同じロジックを持つcssメディアクエリ（低解像度用と高画素密度用） （http://en.wikipedia.org/wiki/Don%27t_repeat_yourself）

奇妙なことです：ピクセル密度2の新しいIpad 3は、私が望むやり方を正しくレンダリングします。つまり、少なくともCSSのメディアクエリが関係しています。解像度の半分のデバイス。

Answer 1

iPhone 4（4Sとは）このメタタグに応答します：

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

それはあなたが後にしている「初期規模」の部分です。高解像度のデバイスは、幅320ピクセル（横480ピクセル）のように動作します。

あなたが知っておくべきであるother bugs around landscape orientationがあります。

また、メディアクエリにorientation parameter availableがあることに注意してください：

@media screen and (orientation:landscape) { 
/* Landscape styles */ 
} 

Answer 2

まず：私はあなたの質問にタイプミスがあると思う - 640x960ディスプレイ上で、640広いが撮りモード、ではない風景です。縦が縦、横が横です。

あなたの質問を正しく読んでいれば、幅のメディアクエリを使って網膜ディスプレイのiphoneをターゲットにする方法を尋ねています。

答えは、網膜ディスプレイのiphoneと非網膜ディスプレイの両方がブラウザに320x240として自分自身を報告することはできません。違いは、あなたが述べたように、網膜ディスプレイを使用して、メディアクエリで標的とすることができる2倍の画素密度を有することである。

.avatar { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: url("50x50-avatar.png"); 
} 
@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
    .avatar { 
    background: url("100x100-avatar.png"); 
    background-size: 50px 50px; 
    } 
} 

この例では、網膜ディスプレイ上に高解像度の画像を表示するためのものであるが、あなたは使用することができ網膜ディスプレイのためのレイアウトを調整するための同じ技術。

簡単に言えば、網膜以外のディスプレイのスタイルを書いてから、メディアクエリを使って網膜ディスプレイオーバーライドを追加すると、DRYに関する懸念を避けることができます。

さらに読書：確かに私が探していたまさに

• Retina iPad Specific CSS
• Safari Developer Library: Configuring the Viewport