NB: This post is based on a briefing note I sent around at rehabstudio, the agency I work for. It’s intended to clear up some of the confusion around resolution on mobile devices with high DPI screens, especially when talking with clients, and is aimed at all roles in the agency, not only developers. As such, it may not be one hundred percent ‘correct’, but I think it does a good enough job of explaining the subject.
Physical pixels vs. device-independent pixels
The first iPhones had a resolution of 320×480, with a physical screen size of 3.5″. The iPhone 4 has the same physical screen size, but was the first to have a ‘Retina’ screen, with a resolution of 640×960. This was accomplished by doubling the physical pixel density; for each pixel in the screen of the iPhone 3G, both horizontally and vertically, the iPhone 4 had four.
In order to keep compatibility with existing mobile web apps a new concept was introduced: the device-independent pixel (DIP). What this means is that the screen keeps a virtual resolution of 320×480, the same as previous screens, but for each DIP, there are four physical pixels in the same space:
This is the reason the screen looks so sharp; the device is capable of displaying literally double the visual information (in both directions) in the same space. Retina devices have a pixel density of two, while some newer screens — such as on the Galaxy S4 — have a pixel density of three, meaning there are nine physical pixels for each DIP.
What this means in practice is that when we create websites which consider mobile devices, the actual resolution is divided by the pixel density: so the iPhone 4’s resolution of 640×960 is divided by its pixel density of two, meaning a practical resolution of 320×480 — the same as older iPhones, but with much more visual clarity. The Galaxy S4 has a resolution of 1080×1920, but a practical resolution of 360×640.
When writing technical documents or discussing screen sizes with clients, we should always talk about the practical resolution, not the actual resolution; for example, don’t say we will support screens of 640 width or up, say we will support screens of 320 width or up.
You can see many common screen sizes at screensiz.es. The width and height values show actual resolutions, while device-width shows practical resolution.
If you really want to dig in to this subject further, I recommend PPK’s article, A Pixel is not a Pixel.
Update (21/10/13): Rewrote the first paragraph to clear up some unnecessary confusion between physical pixels and DIPs.