iPhone 5 CSS media query
css, iphone, iphone-5, media-queries, responsive-design
Solution
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
Problem
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) {} ```