Responsive Web Design – Pixels density and resolution

Pixels DensityAny physical size of device cannot stop web from spreading its wings; be it a smart TV with bigger size or a smartphone in the pocket. Web is spreading all around, Though, physical size of the device is shrinking but resolution of these devices is increasing. Why? and how?

High DPI and Retina

Retina is a marketing term used by Apple, that actually define high resolution and high pixel density. So, high DPI and Retina means the same thing. Retina display comes with 2 pixel ratio, to dig in detail read the article about pixels ratio and viewports.

Pixels density and resolution

Pixel density textPixel density is the number of pixels, that can be fit into a fixed distance, but resolution is the number of pixels across the device (width and height). For example iPhone 4 is of resolution 640 x 960 pixels, where all these pixels are crammed into 3.5 inches across. More pixels more sharper the display.

Pixels density matters more than the resolution or screen size because, more pixels = more sharper display.

Pixels density calculation – DPI / PPI

Pixels density calculation involve a formula, that gives DPI (Dot per inch) or also called PPI (Pixels per inch). This formula gives us; how many pixels have been crammed in one inch distance. Or, Know Resolution, DPI and Screen size details of any device.

Let’s calculate the PPI of iPhone 5s

iPhone 5s resolution = 1136 x 640 and Diagonal screen size = 4 Inch

Diagonal resolution = square root of [ (1136 x 1136) + (640 x 640) ]

Diagonal resolution = square root of [1290496 + 409600]

Diagonal resolution = square root of [1700096]

Diagonal resolution = 1303.87

Now divide the diagonal resolution with diagonal screen size

PPI = 1303.87 / 4

PPI = 325.96

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

1 thought on “Responsive Web Design – Pixels density and resolution”

  1. Adding this meta tag a page scales itself
    meta name=viewport content=”width=device-width, initial-scale=1″ />

Leave a Reply

Your email address will not be published.