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.