iphone - ビューポートでwidth=device-widthを設定すると、レイアウトが崩れます

Question

@mediaCSSのクエリを使用して、デバイスの幅に基づいて拡大縮小することになっているレイアウトがあります。

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

スタイルが適用されているように見えますが、ビューポートが「width = device-width」に設定されると、デザインは事実上壊れます。おそらくそれが狭すぎるためです。これは、CSSがすべてを縮小することになっているので奇妙です。

下の画面を確認してください

クイック編集：どういうわけかAndroid4.1で動作するようです。

Answer 1

これはiPhoneだけの問題ですか？携帯電話の Retina ディスプレイの 2 倍のピクセル サイズが原因である可能性がありますinitial-scale=1.0; maximum-scale=1.0。ビューポート コンテンツに追加してみてください。