10

これは以前に答えられたに違いありませんが、関連する質問が見つかりません。

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

私が欲しいのは、ポートレートモード（640幅）のiPhone4（640 x 960）で、代わりに表示幅=320ピクセルであるかのようにメディアクエリに準拠することです。理論的根拠：iphoneにはより多くのピクセルがありますが、非高密度電話のユーザーと同様に、それらのユーザーに簡略化されたレイアウトを表示したいと思います。

たとえば、これらの高ピクセル密度の電話にメタタグを指定することで、これを行う方法はありますか？

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

奇妙なことに、ピクセル密度2の新しいIpad 3は、私が望むように正しくレンダリングします。つまり、（少なくともcssメディアクエリに関しては）半分の解像度のデバイスを模倣します。

4

2 に答える 2

15

iPhone 4（および4S）は、このメタタグに応答します。

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

それはあなたが求めている「初期規模」の部分です。これにより、高解像度デバイスは幅320px（または横向きでは480）のように動作します。

横向きには、注意が必要な他のバグがあります。

また、メディアクエリで使用できる方向パラメータがあることに注意してください。

@media screen and (orientation:landscape) {
/* Landscape styles */
}
于 2012-07-05T17:57:14.107 に答える
2

最初に：あなたの質問にはタイプミスがあると思います-640x960ディスプレイでは、640ワイドは横向きではなく縦向きモードです。縦向きは縦向き、横向きは横向きです。

そうは言っても、私があなたの質問を正しく読んでいるなら、あなたは幅のメディアクエリを使用して網膜ディスプレイiPhoneをターゲットにする方法を尋ねています。

答えは、あなたができないということです-網膜ディスプレイiphoneと非網膜ディスプレイの両方が320x240としてブラウザに報告します。お気づきのように、違いは、Retinaディスプレイのピクセル密度が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;
  }
}

この例は、Retinaディスプレイに高解像度の画像を表示するためのものですが、Retinaディスプレイのレイアウトを微調整するために同じ手法を使用できます。

したがって、簡単に言うと、最初に非網膜ディスプレイのスタイルを記述してから、メディアクエリを使用して網膜ディスプレイのオーバーライドを追加します。これにより、DRYの懸念を回避できます。

参考文献：

于 2012-07-05T18:14:44.053 に答える