iPhone 5 のレスポンシブ デザイン向けに CSS メディア クエリを最適化するにはどうすればよいですか?

iPhone 5 とレスポンシブ デザイン: CSS メディア クエリの強化

iPhone 5 は、細長いディスプレイを備えているため、レスポンシブ Web デザインに特有の課題を抱えています。これらに対処するために、iPhone 5 向けに特別に調整された新しい CSS メディア クエリを見てみましょう。

デバイス アスペクト比: 洗練されたアプローチ

iPhone 5 の型破りな画面アスペクト比 40:71 では、従来の max-device-width クエリよりも正確なアプローチが必要です。デバイス アスペクト比メディア機能を使用すると、特に iPhone 5 をターゲットにすることができます。

@media screen and (device-aspect-ratio: 40/71) {
  /* Styles for iPhone 5 */
}

クエリを組み合わせて精度を向上

両方の iPhone 5 に対応するにはおよび古い iPhone モデルでは、新しいアスペクト比クエリを既存の max-device-width クエリと組み合わせることができます。例:

@media screen and (max-device-width: 480px) and (device-aspect-ratio: 40/71) {
  /* Styles specifically for iPhone 5 */
}

アスペクト比の考慮事項

iPhone のモデルによってアスペクト比が異なることに注意してください。デバイス アスペクト比機能を使用すると、各モデルを正確にターゲットにすることができます。

• iPhone < 5: 2/3
• iPhone 5: 40/71
• iPhone 6: 375/667
• iPhone 6 Plus: 16/9
• iPad: 3/4

参考文献:

• [メディア クエリ](https://www.w3.org/TR/css3-mediaqueries/) )
• [iPhone モデル比較](https://www.apple.com/iphone/compare/)
• [アスペクト比計算ツール](https://www.aspect-ratio-calculator.com/)

以上がiPhone 5 のレスポンシブ デザイン向けに CSS メディア クエリを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。