iPhone 5 CSS media query

Question

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 1

for me, the query that did the job was:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

Answer 2

Just a very quick addition as I have been testing a few options and missed this along the way. Make sure your page has:

<meta name="viewport" content="initial-scale=1.0">

Answer 3

There is this, which I credit to this blog:

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Keep in mind it reacts the iPhone 5, not to the particular iOS version installed on said device.

To merge with your existing version, you should be able to comma-delimit them:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: I haven't tested the above code, but I've tested comma-delimited @media queries before, and they work just fine.

Note that the above may hit some other devices which share similar ratios, such as the Galaxy Nexus. Here is an additional method which will target only devices which have one dimension of 640px (560px due to some weird display-pixel anomalies) and one of between 960px (iPhone <5) and 1136px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Answer 4

None of the response works for me targeting a phonegapp App.

As the following link points, the solution below works.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Answer 5

You can get your answer fairly easily for the iPhone5 along with other smartphones on the media feature database for mobile devices:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

You can even get your own device values on the test page on the same website.

(Disclaimer: This is my website)