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