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

Solution 1

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

Solution 2

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 */
}

Solution 3

All these answers listed above, that use max-device-width or max-device-height for media queries, suffer from very strong bug: they also target a lot of other popular mobile devices (probably unwanted and never tested, or that will hit the market in future).

This queries will work for any device that has a smaller screen, and probably your design will be broken.

Combined with similar device-specific media queries (for HTC, Samsung, IPod, Nexus...) this practice will launch a time-bomb. For debigging, this idea can make your CSS an uncontrolled spagetti. You can never test all possible devices.

Please be aware that the only media query always targeting IPhone5 and nothing else, is:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Note that exact width and height, not max-width is checked here.

---

Now, what is the solution? If you want to write a webpage that will look good on all possible devices, the best practice is to you use degradation

/* degradation pattern we are checking screen width only sure, this will change is turning from portrait to landscape*/

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

If more than 30% of your website visitors come from mobile, turn this scheme upside-down, providing mobile-first approach. Use min-device-width in that case. This will speed up webpage rendering for mobile browsers.

Solution 4

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)

Solution 5

iPhone 5 in portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 in landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 in portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

View more solutions

Comments

[Maverick]

Can you suggest how I might combine this query with my old one to catch both iphone 4 and 5?

[BoltClock]

Which iPhone is using a device pixel ratio of 1.5?

[Tom Roggero]

I highly recommend to do media queries depending on device width, and not device name (iPhone). So if the iPhone 5 has more width, just make that usable.

[Mike Sweeney]

Careful as this will effect other phones as well - not just the iphones. An example being the Samsung Galaxy Nexus.

[Cat]

@MikeSweeney Good call. I've updated my post with a new method that should not include other devices.

[Mike Sweeney]

@Eric That's pretty much what I wound up settling on after a bunch of cross-phone testing - had to bring height into the mix! Seems to be working great across the 7-8 various phones I test on.

[primavera133]

I would go progressive enhancement and mobile first. That is beginning with mobile and building up using min-device-width.

[Pointy]

Also note that the height/width/pixel-ratio solution that only matches the iPhone 5 will also match the next phone that appears that happens to have the same characteristics. The overall theme of your answer is correct: thinking in terms of specific devices is the wrong way to proceed.

[Dimitri Vorontzov]

@Dan – even though your answer doesn't directly address the question, it looks at it within a wider perspective of best practices for responsive design. Things you wrote here, in my opinion, are very deep and practical. Five stars.

[Dimitri Vorontzov]

@Dan – trying to implement your suggestion, something is not working. May I please ask you to take a look: stackoverflow.com/questions/16486078/…

[TaeKwonJoe]

I like this approach but could not get it to work in a PhoneGap app webview until adding -webkit-min-device-pixel-ratio as explained by Stephen Sprawl zsprawl.com/iOS/2012/09/css-media-queries-for-the-iphone-5. @media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) { //iphone5 for teh phonegaps }

[S..]

@primavera, please say why. What is the advantage of a mobile first approach?

[primavera133]

Setting base css for those devices with least processor power. CSS overrides pointed to those (desktop etc) with more power.

[Mahendra Liya]

I had to add and (-webkit-min-device-pixel-ratio: 2) in iPhone 5 media query to make it work in PhoneGap webview as stated by @TaeKwonJoe

[Maverick]

Thank you for updating this to include iPhone 6!

[euccas]

This works pretty well when I need differentiate iphone 4 and iphone 5 in css.

[do what now]

For iphone 6, (device-aspect-ratio: 667/375) did not work on a real physical iphone 6. It worked on the iOS simulator though. I changed it to 375/667 and it worked on the physical device.

[newshorts]

Thanks 2C-B, you might want to switch 16/9 to 9/16 on 6+ to get it to work on device as well.

[Sgnl]

is this line correct: iPhone 5 and not to iOS 6? Should it be: "iPhone5 and not to iPhone 6"?

[Cat]

@Sgnl Actually, the line is correct. But given the changes since the post was written, I'll edit it to be more clear.

[adi518]

Why do you need max-device-width : 568px on portrait?

[Sudheer]

@adi518 if you don't use max-width then css rules are applied for any device greater than 320px which is like literally most of the devices - tablets desktops etc

[adi518]

Why not use device-width: 320px and device-height: 568px instead?

[Thomas Maier]

Does the aspect ratio use the portrait version of the phone? or can this also be used instead of orientation:landscape/portrait?

[Muhammad Zeeshan]

Yet another aspect ratio calculator: mzeeshan.me/aspectratio