Display size, Resolution & Pixel Density

Display Size

All electronics screens are measured diagonally. So if you have width and height of a screen, you can get the actual size by Pythagoras’s theorem i.e screen size = √ (width)² + (height)²

1.1 : Display size

Or Vice Versa, when you have diagonal length and want to calculate width and height, you can use an aspect ratio of the screen.
eg) Most of the big screens like TV or Monitors have the aspect ratio of 16:9. Consider, you have a screen of size 32 inch (diagonal length) & the the aspect ratio of 16:9, then the width & height can be calculated by simple algebra.

step 1: Diagonal size of a screen with width 16px and height 9px (aspect ratio: 16:9):
d = √ (16)² + (9)²
∴ d = √337 = 18.357
step 2: Aspect ration of 32 inch screen is 16:9
32 = √ (16x)² + (9x)²
step 3:
2 screens with same aspect ratio will always have the same constant multiplication factor for their diagonal also.
∴ constant multiplication factor for diagonal is 18.357. …(from step 1)
∴ x = 32/18.357 = 1.743
i.e screen in step 2 is 1.743 times the actual screen
step 4:
width = 16x = 16 * 1.743 = 27.88 inch
height = 9x = 9 * 1.743 = 15.687 inch

Pixel:

Pixel is the smallest element that can be displayed on a screen. To be more simple, it is just a single dot on a display or a screen.

Resolution:

It refers to the number of distinct pixels in each dimension that can be displayed.
Resolution of 1920*1080 pixels means that the there are 1920 pixels horizontally and 1080 pixels vertically present in the screen.
∴ Total pixels in the display = 20,73,600

1.2 : Resolution and Pixel Density

Pixel Density:

It refers to the number of pixels present per inch on the display. It is measured in PPI (pixels per inch).

Pixel Density = Resolution of Diagonal in px / Diagonal in inches

Calculate Pixel Density:
1) No. of pixels present diagonally = √ (no. of pixels present horizontally)² + (no. of pixels present vertically)² …(by Pythagoras’s theorem)
∴ No. of pixels present diagonally = √ (1920)² + (1080)²
∴ No. of pixels present diagonally = 2202.91
2) Pixel Density = Resolution of Diagonal in px / Diagonal in inches
∴ Pixel Density = 2202.91 / 32
∴ Pixel Density = 68.84 ppi

Notes:
1) with the same resolution, smaller the screen, larger the PPI and vice versa.
e.g.) iPhone X has 2436x1125-pixel resolution at 458 ppi. However, iMac pro has 27 inch 5k display with 5120x2880 resolution at 217.5 ppi.
2) Higher the pixel density higher is the sharpness of the content.
3) Fixed layout website (all dimensions specified in px) looks smaller in mobile screen.