iPhone 5 CSS media query

iphone css responsive-design media-queries iphone-5
Maverick picture Maverick · Sep 22, 2012 · Viewed 252.2k times · Source

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

Answer

2C-B picture 2C-B · Oct 11, 2012

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

Related questions

What are the device-width css viewport sizes of the iPhone6 and iPhone 6 Plus

The iPhone 6 and iPhone 6 Plus were just announced. But as usual, phone specs never give the meta viewport device-width sizes in CSS Pixels or DPR at width=device-width,initial-scale=1. Predictions have been made, speculating on 375/414px viewport width, but that …

Read More
position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More
Turn off iPhone/Safari input element rounding

My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website. Is there a way to instruct Safari (…

Read More