A simple explanation of High DPI screens

Warning This article was written over six months ago, and may contain outdated information.

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:

A 'standard' pixel equals four 'High <abbr>DPI</abbr>‘ pixels” src=”/wp-content/uploads/2013/10/High-DPI.png” width=”314″ height=”183″ /></p>
<p>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 <abbr>DIP</abbr>.</p>
<p>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.</p>
<p>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.</p>
<p>You can <a href=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.

4 comments on
“A simple explanation of High DPI screens”

  1. Nice article, but the link to the screensiz.es is broke.

    Jamie Rytlewski [October 2nd, 2013, 17:47]

  2. Thanks Jamie; I’ve corrected that error.

  3. 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.

  4. Thanks, Niels, I’ve done a quick rewrite to clear that up.