メディア クエリで iPhone 5 の固有のアスペクト比をターゲットにするにはどうすればよいですか?

iPhone 5 のメディア クエリの難題

iPhone 5 の場合、通常の max-device-width クエリでは不十分です。 iPhone 5 は画面が長いため、モバイル ビューを完全にスキップします。

適応するには、デバイスのアスペクト比をメディア クエリに組み込むことを検討してください。興味深いことに、iPhone 5 のアスペクト比は 16:9 ではなく、40:71 です。

@media screen and (device-aspect-ratio: 40/71) {}

このようにして、他の iPhone モデルを念頭に置きながら、特に iPhone 5 をターゲットにすることができます:

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

メディア クエリでデバイス アスペクト比を使用すると、Web サイトがさまざまな iPhone モデルに適切に適応するようになります。幅の広い iPhone 5 とその独自のアスペクト比。

以上がメディア クエリで iPhone 5 の固有のアスペクト比をターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。