Device Independent Pixel Formula For Mobile Devices

Published on 29 Mar 2012 at 8:22 pm.
Filed under Informative,Mobile,Web Design.

Device Independent Pixel (or Density Independent Pixel) count is a very important factor when dealing with mobile devices. Many people only focus on the physical size of the screen, but the dot per inch (DPI) is what gives the screen depth. So what exactly does this mean for a mobile device?

Word to the wise, you are going to need to put on technical propeller hats required for this blog post. There will be math involved. You have been warned.

Device Independent Pixel Formula: DPI Explained

DPI is a term that originated with print, and is sometimes referred to as PPI (pixels per inch) when dealing with computer software. Windows computers have a default DPI calculated to 96 DPI, while Macs use 72 DPI. On the web on a desktop computer all browsers unify the display at 72 DPI.

Mobile devices are another matter entirely. A mobile device will first start by determining the real DPI for the device and then will round that number to the to a 120 DPI for a low density screen, 160 DPI for a medium density screen (which is the baseline for many calculations using a phone), 240 DPI for high density, and finally 320 DPI for extra high density. For anyone curious, the term retina display was invented by Apple where by Steve Jobs to stated that any device that was higher than 300 DPI could be considered a retina display. There are some that argue the specifics of this and how the type of screen affects things, but this is basically the case.

You can actually compute the DPI of a device yourself using the Pythagorean Theorem if you know the physical dimensions and the screen resolution. The DPI will be derived by dividing the diagonal of the screen resolution by the physical device diagonal. For those that do not remember, the Pythagorean Theorem states that for any right triangle the diagonal c and sides a and b the following theorem holds true:

a² + b² = c²

Using my Samsung Galaxy Nexus as an example, the physical diagonal is 4.65 inches and the screen resolution is 1280×720. This means that the diagonal of the screen resolution can be found with:

1280² + 720² = c²
sqrt(1280² + 720²) = c
1468.60478 = c

Dividing this number by 4.65 gives us a DPI value of 315.828985, which is rounded to 316 and would then be further rounded to the extra high density 320 DPI level.

Device Independent Pixel Formula: Device Pixel Ratio

From we can calculate the device pixel ratio by dividing the device’s actual density by the baseline density. In the case of the Galaxy Nexus (and any iOS device with retina) this means 320 DPI is divided by 160 DPI for a value of 2.

Device Independent Pixel Formula Computed

Now that we know the device pixel ratio we can finally derive the device indendent pixels (dips). A device independent pixel is a virtual pixel that when multiplied by the device pixel ratio results in the screen pixels.

px = dips * dpr
therefore: px / dpr = dips

Device Independent Pixel Gotcha: The virtual buttons to the right are 84px wide resulting in 598 dips for the browser window.

Using the Samsung Galaxy Nexus again, taking the 720 px side and the 2 dpr will yield 360 dips. Similarly, the 1280 px side will result in 640 dips.

For all of you web developers out there please note that the Galaxy Nexus was the very first phone to run Android 4.0. The device does not have any physical buttons as they are all done via software. Because of the small form factor the software buttons appear along the right instead of the bottom of the screen. These buttons take up 84px and must be subtracted from 1280 if you would like to calculate the dips for just the browser window. For Android 4.0 tablets such as the Asus Transformer Prime the buttons remain along the bottom and thus simplifies the calculation.

This post was originally published as Device Independent Pixel Formula For Mobile Devices for The BrandBuilder Company.