Responsive Web: PPI, DPI & DP Explained Simply

As a beginner in the Responsive Web Design space, I’ve recently started to look into how to deal with high density displays. This led me into the very confusing world of PPI’s, DPI’s, DP’s and many people referencing these values in incorrect ways. This is my attempt to explain it all in a non-confusing way.

First, Some Calculations:

Enter Galaxy Nexus

• Resolution: 1280 x 720 px
• Screen Size: 4.65” diagonal

We can calculate the PPI (Pixels Per Inch) by dividing the total pixels on the screen (1280*720) by the physical area of the screen. It’s important to note that PPI is a physical calculation of the screen, that never changes.

• Galaxy Nexus PPI: 316

       For the sake of superb simplicity, I’m leaving out the extra details about how PenTile can affect this calculation.

Now, enter DPI (Dots Per Inch). While PPI was a physical calculation, DPI is adjustable, depending on how dense the manufacturer wants the screen to be. Often, they will choose a default DPI value closest to the PPI.

• Galaxy Nexus Default DPI: 320

       This value can be adjusted by the user with an app or custom ROM.

DPI is important because it helps us calculate the DP/DiP (Density-independent Pixel). These are ‘virtual pixels’, which as far as we’re concerned in Responsive Web Design, is the device’s resolution. We can calculate the dp by dividing the number of pixels by (DPI / 160). Why 160? It’s the baseline.

• So, a Galaxy Nexus with DPI set to 320 gives us a new resolution: 640 x 360 dp
• If a user lowered their DPI to 240, their resolution would be 853.33 x 480 dp.

How this all relates to RWD

In a ‘mobile’ browser viewport, the width and height are usually much larger than the normal dimensions on the screen. This is a virtual resolution specifically given to the page so that you can see a ‘zoomed-out’ view of that site.

• A mobile device will use this viewport’s resolution width and height for media queries and css calculations.
• The dp resolution values are reported on Android/iOS devices as Device Width and Device Height.
• Adding meta name="viewport" width="device-width" to the page will force the viewport to render using the dp resolution. Alternatively, if you just want to match on media queries, calculating based on device-width/device-height in the media query instead of just width/height will have better matched results.
• Guess what, Windows Phone went different... for every phone with WP7, device-width is always 320 in portrait and 480 in landscape, no matter what.

Sidenote: Density

Density, in this context, refers to the relationship between the screens px count versus the dp count. A higher density means you have more pixels available to render your dp which translates to the screen appearing ‘sharper’. This is usually represented as a ratio, the Device Pixel Ratio. It’s calculated as the phone’s width or height in px divided by the related width or height in dp.

• At default DPI, Galaxy Nexus’ Device Pixel Ratio: 2
• If a user lowered their DPI to 240, their Device Pixel Ratio would be 1.5. This means they would have more resolution available, but less density.
• Surprise, Windows Phone does it different again! Device Pixel Ratio is unavailable on WP7. Instead, you can grab the DPI and the screen width yourself, calculate the dp, and then calculate the ratio. Nice.