iPhone 5 CSS media query

Asked 22/9, 2012 at 0:27 Answered 23/7, 2014 at 12:23

Solved iphone css responsive-design media-queries iphone-5

132

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

Julienne answered 22/9, 2012 at 0:27 Comment(2)

Can we see your existing media queries? – Sonatina 22/9, 2012 at 2:7

Try this? halgatewood.com/iphone-5-media-query – Huysmans 22/9, 2012 at 2:15

287

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

Quinquereme answered 11/10, 2012 at 20:44 Comment(7)

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 } – Lifeordeath 29/10, 2013 at 21:3

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 @Lifeordeath – Hardboard 1/1, 2014 at 9:13

This works pretty well when I need differentiate iphone 4 and iphone 5 in css. – Selfimportant 2/9, 2015 at 6:58

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. – Prolix 9/10, 2015 at 17:43

Thanks 2C-B, you might want to switch 16/9 to 9/16 on 6+ to get it to work on device as well. – Forespeak 29/2, 2016 at 23:22

Does the aspect ratio use the portrait version of the phone? or can this also be used instead of orientation:landscape/portrait? – Veljkov 13/8, 2017 at 11:14

Yet another aspect ratio calculator: mzeeshan.me/aspectratio – Pimental 17/1, 2022 at 10:41

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

Hogwash answered 22/9, 2012 at 2:15 Comment(6)

Can you suggest how I might combine this query with my old one to catch both iphone 4 and 5? – Julienne 22/9, 2012 at 4:10

Careful as this will effect other phones as well - not just the iphones. An example being the Samsung Galaxy Nexus. – Bueno 12/10, 2012 at 18:6

@MikeSweeney Good call. I've updated my post with a new method that should not include other devices. – Hogwash 12/10, 2012 at 18:13

@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. – Bueno 17/10, 2012 at 14:43

is this line correct: iPhone 5 and not to iOS 6? Should it be: "iPhone5 and not to iPhone 6"? – Standford 29/6, 2017 at 0:1

@Standford Actually, the line is correct. But given the changes since the post was written, I'll edit it to be more clear. – Hogwash 29/6, 2017 at 0:30

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.

Captor answered 16/1, 2013 at 17:35 Comment(6)

I would go progressive enhancement and mobile first. That is beginning with mobile and building up using min-device-width. – Callery 18/1, 2013 at 14:42

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. – Thiouracil 15/2, 2013 at 23:47

@Captor – 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. – Freiman 10/5, 2013 at 15:12

@Captor – trying to implement your suggestion, something is not working. May I please ask you to take a look: #16486578 – Freiman 10/5, 2013 at 15:55

@primavera, please say why. What is the advantage of a mobile first approach? – Scharf 10/11, 2013 at 22:24

Setting base css for those devices with least processor power. CSS overrides pointed to those (desktop etc) with more power. – Callery 12/11, 2013 at 10:21

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)

Gavel answered 10/12, 2012 at 13:43 Comment(0)

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

}

Falsework answered 23/7, 2014 at 12:23 Comment(3)

Why do you need max-device-width : 568px on portrait? – Strawworm 9/8, 2017 at 16:9

@Strawworm 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 – Falsework 10/8, 2017 at 5:36

Why not use device-width: 320px and device-height: 568px instead? – Strawworm 10/8, 2017 at 8:49

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
}

Catholicon answered 7/12, 2012 at 10:21 Comment(0)

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">

Malignity answered 2/12, 2013 at 11:48 Comment(0)

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)

Garb answered 23/10, 2012 at 13:55 Comment(0)

afaik no iPhone uses a pixel-ratio of 1.5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

Abroms answered 14/3, 2013 at 11:16 Comment(0)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Transistorize answered 2/4, 2014 at 15:1 Comment(0)

-3

You should maybe down the "-webkit-min-device-pixel-ratio" to 1.5 to catch all iPhones ?

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

Executant answered 30/9, 2012 at 0:54 Comment(2)

Which iPhone is using a device pixel ratio of 1.5? – Sonatina 30/9, 2012 at 0:56

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. – Hone 30/9, 2012 at 4:40

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags