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:
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.
Nice article, but the link to the screensiz.es is broke.
Jamie Rytlewski [October 2nd, 2013, 17:47]
Thanks Jamie; I’ve corrected that error.
Peter [October 2nd, 2013, 19:57]
Hi Peter,
When you are talking about ‘physical pixels’, you don’t seem to be talking about the actual physical pixels of the device, but the about the device independent pixels.
For example the iPhone 3G and iPhone 4 both have a screen width of 320 in device-independent pixels. Different devices, but same number: device-independent.
But the iPhone 4 has 640 pixels on the physical screen while the iPhone 3G only has 320. Measured by actually counting the pixels on the actual physical screen: physical pixels.
Niels Leenheer [October 16th, 2013, 15:19]
Thanks, Niels, I’ve done a quick rewrite to clear that up.
Peter [October 21st, 2013, 14:26]