iPhone 5 の独自のアスペクト比に合わせて Web サイトを最適化するにはどうすればよいですか?

iPhone 5 のレスポンシブ デザイン: 狭いビューポートへの対応

iPhone 5 の導入により、このデバイスの Web サイトの応答性を最大化することが重要になりました。画面が長くなったにもかかわらず、多くの Web サイトは依然として標準のデスクトップ ビューでレンダリングされます。これに対処するには、メディア クエリをそれに応じて調整する必要があります。

現在使用している既存のメディア クエリ「@media Only screen and (max-device-width: 480px) {}」は、次のようなデバイスに適しています。最大幅は 480 ピクセルです。ただし、iPhone 5 はこの幅を超えています。

「デバイス アスペクト比」メディア機能の紹介

この制限を克服するために、「デバイス アスペクト比」が使用されます。メディア機能を活用できます。一般に信じられていることに反して、iPhone 5 には 16:9 のアスペクト比がありません。代わりに、40:71 です。

これにより、新しいメディア クエリの可能性が広がります。

• iPhone < 5: "@メディア スクリーンと (デバイス アスペクト比: 2/3) {}"
• iPhone 5: "@メディア スクリーンと (デバイス アスペクト比: 2/3) : 40/71) {}"
• iPhone 6: "@media 画面と (デバイス アスペクト比: 375/667) {}"
• iPhone 6 Plus: "@メディア 画面と (デバイス アスペクト比: 16/9) ) {}"
• iPad: "@media 画面と(デバイス アスペクト比: 3/4) {}"

これらのメディア クエリをウェブサイトに組み込むことで、iPhone 5 やその他のさまざまなデバイスのユーザーに最適なモバイル表示エクスペリエンスを確保できます。アスペクト比。

以上がiPhone 5 の独自のアスペクト比に合わせて Web サイトを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。