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:
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:
This might be useful if you are trying to display a link only on iphone 5 vs a different link on iphone 6.