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 brief¬≠ing note I sent around at rehab¬≠stu¬≠dio, the agency I work for. It‚Äôs intend¬≠ed to clear up some of the con¬≠fu¬≠sion around res¬≠o¬≠lu¬≠tion on mobile devices with high DPI screens, espe¬≠cial¬≠ly when talk¬≠ing with clients, and is aimed at all roles in the agency, not only devel¬≠op¬≠ers. As such, it may not be one hun¬≠dred per¬≠cent ‚Äėcor¬≠rect‚Äô, but I think it does a good enough job of explain¬≠ing the subject.

Physical pixels vs. device-independent pixels

The first iPhones had a res¬≠o¬≠lu¬≠tion of 320√ó480, with a phys¬≠i¬≠cal screen size of 3.5‚Ä≥. The iPhone 4 has the same phys¬≠i¬≠cal screen size, but was the first to have a ‚ÄėReti¬≠na‚Äô screen, with a res¬≠o¬≠lu¬≠tion of 640√ó960. This was accom¬≠plished by dou¬≠bling the phys¬≠i¬≠cal pix¬≠el den¬≠si¬≠ty; for each pix¬≠el in the screen of the iPhone 3G, both hor¬≠i¬≠zon¬≠tal¬≠ly and ver¬≠ti¬≠cal¬≠ly, the iPhone 4 had four.

In order to keep com¬≠pat¬≠i¬≠bil¬≠i¬≠ty with exist¬≠ing mobile web apps a new con¬≠cept was intro¬≠duced: the device-inde¬≠pen¬≠dent pix¬≠el (DIP). What this means is that the screen keeps a vir¬≠tu¬≠al res¬≠o¬≠lu¬≠tion of 320√ó480, the same as pre¬≠vi¬≠ous screens, but for each DIP, there are four phys¬≠i¬≠cal pix¬≠els in the same space:

A 'standard' pixel equals four 'High <abbr>DPI</abbr>' pixels

This is the rea¬≠son the screen looks so sharp; the device is capa¬≠ble of dis¬≠play¬≠ing lit¬≠er¬≠al¬≠ly dou¬≠ble the visu¬≠al infor¬≠ma¬≠tion (in both direc¬≠tions) in the same space. Reti¬≠na devices have a pix¬≠el den¬≠si¬≠ty of two, while some new¬≠er screens ‚ÄĒ such as on the Galaxy S4 ‚ÄĒ have a pix¬≠el den¬≠si¬≠ty of three, mean¬≠ing there are nine phys¬≠i¬≠cal pix¬≠els for each DIP.

What this means in prac¬≠tice is that when we cre¬≠ate web¬≠sites which con¬≠sid¬≠er mobile devices, the actu¬≠al res¬≠o¬≠lu¬≠tion is divid¬≠ed by the pix¬≠el den¬≠si¬≠ty: so the iPhone 4‚Äôs res¬≠o¬≠lu¬≠tion of 640√ó960 is divid¬≠ed by its pix¬≠el den¬≠si¬≠ty of two, mean¬≠ing a prac¬≠ti¬≠cal res¬≠o¬≠lu¬≠tion of 320√ó480 ‚ÄĒ the same as old¬≠er iPhones, but with much more visu¬≠al clar¬≠i¬≠ty. The Galaxy S4 has a res¬≠o¬≠lu¬≠tion of 1080√ó1920, but a prac¬≠ti¬≠cal res¬≠o¬≠lu¬≠tion of 360√ó640.

When writ¬≠ing tech¬≠ni¬≠cal doc¬≠u¬≠ments or dis¬≠cussing screen sizes with clients, we should always talk about the prac¬≠ti¬≠cal res¬≠o¬≠lu¬≠tion, not the actu¬≠al res¬≠o¬≠lu¬≠tion; for exam¬≠ple, don‚Äôt say we will sup¬≠port screens of 640 width or up, say we will sup¬≠port screens of 320 width or up.

You can see many com­mon screen sizes at screensiz.es. The width and height val­ues show actu­al res­o­lu­tions, while device-width shows prac­ti­cal resolution.

If you real­ly want to dig in to this sub­ject fur­ther, I rec­om­mend PPK’s arti­cle, A Pix­el is not a Pix­el.

Update (21/10/13): Rewrote the first para¬≠graph to clear up some unnec¬≠es¬≠sary con¬≠fu¬≠sion between phys¬≠i¬≠cal pix¬≠els and DIPs.

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

  1. Nice arti¬≠cle, but the link to the screensiz.es is broke.

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

  2. Thanks Jamie; I‚Äôve cor¬≠rect¬≠ed that error.

  3. Hi Peter,

    When you are talk¬≠ing about ‚Äėphys¬≠i¬≠cal pix¬≠els‚Äô, you don‚Äôt seem to be talk¬≠ing about the actu¬≠al phys¬≠i¬≠cal pix¬≠els of the device, but the about the device inde¬≠pen¬≠dent pixels.

    For exam­ple the iPhone 3G and iPhone 4 both have a screen width of 320 in device-inde­pen­dent pix­els. Dif­fer­ent devices, but same num­ber: device-independent.

    But the iPhone 4 has 640 pix­els on the phys­i­cal screen while the iPhone 3G only has 320. Mea­sured by actu­al­ly count­ing the pix­els on the actu­al phys­i­cal screen: phys­i­cal pixels.

  4. Thanks, Niels, I‚Äôve done a quick rewrite to clear that up.