Home/ Questions/Q 8670283
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T18:40:33+00:00

The iPhone 5 has a longer screen and it’s not catching my website’s mobile

  • 0

The iPhone 5 has a longer screen and it’s not catching my website’s mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries?

My current media query is this:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Another useful media feature is device-aspect-ratio.

    Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.

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

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

    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) {}

    Reference:
    Media Queries @ W3C

    iPhone Model Comparison

    Aspect Ratio Calculator

    • 0