Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » CSS Media Queries for the iPhone 5

CSS Media Queries for the iPhone 5

Published on September 25th, 2012

I’ve recently been getting back into iPhone development with the iPhone 5’s new screen and the need to update some of my Apps for the new phone and operating system. As you probably already know, the new 4-inch screen is yet another set of dimensions programmers needs to take into account. The new screen is 1136 pixels wide by 640 pixels in portrait mode. So far I’ve had great luck with the following CSS Media Query for my Portrait only apps, which uses 568px as the fixed device height (times 2.0 pixel ratio equals the 1136px across).

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

This works well mostly because of the -webkit-min-device-pixel-ratio parameter, which detects the retina display in accordance with the higher resolution.

Let me know below what you are using!

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl’s work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


 

3 Responses

  1. Erling Ormar Vignisson

    Yours hit the spot… had tried at least three other queries, with no luck. Thanks! 🙂

  2. Npersson

    Nice one! Will use this for my phone gap app!

  3. Thanks for dropping this knowledge. Turns out -webkit-min-device-pixel-ratio enables device aspect ratio parameters also.

    @media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) {
    //iphone5
    }

Leave a Reply

© 2012 zSprawl's zApps

Fork me on GitHub