[解決済み] iPhone 5 CSSメディアクエリ

質問

iPhone 5は画面が長いので、私のウェブサイトのモバイルビューをキャッチできません。iPhone 5用の新しいレスポンシブデザインクエリとはどのようなもので、既存のiPhone用クエリと組み合わせることができるのでしょうか？

現在使っているメディアクエリはこれです。

@media only screen and (max-device-width: 480px) {}

どのように解決するのですか？

もう一つの便利なメディア機能は device-aspect-ratio .

なお iPhone 5 は 16:9 のアスペクト比を持ちません。 . 実際には40:71です。

iPhone < 5です。

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

iPhone5です。

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

iPhone6です。

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

iPhone 6 Plusです。

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

iPadです。

参考までに。

メディアクエリ @ W3C

iPhone モデル比較

アスペクト比計算機