0

最近、レスポンシブデザインに取り掛かろうとしています。私がこれまでに遭遇した唯一の問題は、iPadとiPhoneのビューポートのものです。

Initial-Scaleを1に設定すると、メディアクエリが幅640pxに設定されていても、iPhone（網膜）のページサイズが2倍になるようです。私が見る限り、メディアクエリは正常に機能していることに注意してください。すべてが適切に調整されます。ダブルズームの問題は、ページが読み込まれるたびにダブルタップしてズームアウトするか、初期スケールを0.5に設定することで修正できます。0.5に設定する場合の問題は、iPadで表示すると、画面の半分のサイズになることです。1.0はiPadで動作するようですが、iPadでは2倍になるようです（iPadとiPhoneには別々のメディアクエリがあります）。

概要：iPhoneのスケール1.0は、ページのズームを2倍にし、iPadでは問題ありません。iPhoneでは0.5の大きさ、iPadでは半分のサイズに拡大縮小します。

誰かが私が間違っているかもしれないことを知っていますか？

ありがとう

4

1 に答える 1

0

より高解像度のデバイスをターゲットにできるように、「ピクセル比」のメディアクエリがあります。

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

}

また、width=device-widthビューポートメタタグを設定していますか？

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2012-10-09T23:06:26.300 に答える