Targeting iPhone 5 vs 6 with Media Queries

So most blogs will tell you to target different versions of iphone using “device-width”. There’s a good example of this here: http://stephen.io/mediaqueries/#iPhone. While these media queries aren’t wrong, they pose a challenge when trying to target an iPhone 5 vs iPhone 6. For that we need something a little more specific.

Fortunately, we have a media query that can help us out called:

[pastacode lang=”css” message=”” highlight=”” provider=”manual”]

device-aspect-ratio

[/pastacode]

With this we can target individual devices, lucky for us, the iphone 5/5s and 6/6s and 6+/6+s all have different aspect ratios:

• iPhone 5/5s: 40/71
• iPhone 6/6s: 375/667
• iPhone 6+/6+s: 9/16

So the following would target each device:

[pastacode lang=”css” message=”” highlight=”” provider=”manual”]

// iphone 5/5s portrait/landscape
    .download-iphone5 {
      @media screen and (device-aspect-ratio: 40/71) {
        display: block;
      }
    }

    // iphone 6/6s portrait/landscape
    .download-iphone6 {
      @media screen and (device-aspect-ratio: 375/667) {
        display: block;
      }
    }

    // iphone 6+/6+s portrait/landscape
    .download-iphone6 {
      @media screen and (device-aspect-ratio: 9/16) {
        display: block;
      }
    }

[/pastacode]

This might be useful if you are trying to display a link only on iphone 5 vs a different link on iphone 6.

More here: http://stackoverflow.com/questions/12539697/iphone-5-css-media-query