Difference between Viewport and Resolution

The Pixel & Pixel Per Inch

Mobile and other similar devices' screens are contained on pixels (individual points of color) and together when all pixel display feels like an image. Number of pixels on the horizontal axis and the number of pixels on vertical axis called resolution. The sharpness of images/text or anything which is displayed on a screen depends on the resolution and screen size. The same pixel resolution will show sharper on a smaller screen and gradually lose sharpness on large screens because the same number of pixels are being spread over a large n number of inches.

Normally the screen's physical size calculated in inches and as resolution depends on the screen's physical size so to determine screen's resolution unit is called Pixels Per Inch.

Number of pixels increases per inch it increases the quality of display and ratio. Here is a question: how many pixels in an inch so we can calculate resolution of a screen? Well, there is no specific answer because we can't set some single value for all screens it also varies from screen sizes Typically it lies between 72 - 162 pixels per inch and its value increases as the screen goes smaller.

Viewport

Device's visible area for a user is called, the actual viewport size of the screen.

Viewport screen size

Viewport screen size is the actual resolution of any screen and it depends how much unit of pixels per inch simply. Viewport always remains same in terms of screen size as screen size remains same but resolution to display it, is changeable for example old 15" monitors can display different resolutions from 800 x 600, 1024 x 768 and 1280 x 1023 so it depends on focus ability of a screen.

Note that As resolution goes smaller from its original or maximum display resolution, you will get blurry results because the same number of pixels is now spreading on big viewport size.

CSS Pixel Ratio

An inch can contain about 72 - 162 pixels. Let's consider 132 pixels per inch for a mobile as a unit for every device. One unit pixels equal to 1 CSS pixel ratio. So if unit pixels increases, CSS pixel ratio will be increased. For example a device has 296 PPI then it's pixel ratio can be 2 (after point can be ignored).

Resolution, Viewport and CSS Pixel Ratio

The resolution depends on CSS pixel ratio. If cases pixel ratio increases the resolution of the device can be increased, but remember viewport of size, which is the actual visible size of the screen will not change. The maximum resolution of a screen is actually a multiplier of CSS pixel ratio.

Example

iPhone 7
Viewport size: 375 x 667 Pixels
Resolution: 750 x 1334 Pixels
Pixel Density: ~326 ppi
CSS Pixel Ratio: 2

Disclaimer: Information collected from different top relevent websites. It is tried to keep the information correct.
If you find anything wrong email us [email protected]