The number of device pixels that make up a CSS pixel in one direction is its Device Pixel Ratio (DPR). You can interpret this as the width (or height) of the grid of device pixels that fit inside one CSS pixel. Every device has a different DPR. Higher resolution devices have a higher DPR. These devices can see sharper images because they devote more screen pixels to each CSS pixels. This means nuances in the image are better represented.If a Web browser (or any other application for that matter) naively continues to say that one pixel according to the app’s concept of pixels is the same as one pixel on the screen, then eventually you have text and images so small that they’re impossible to view easily.
The reason that CSS pixel ratio was created is because as phones screens get higher resolutions, if every device still had a CSS pixel ratio of 1 then webpages would render too small to see. A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now. So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read. Check your DPR: Whatismyscreenresolution
In the world of web development, the device pixel ratio (also called CSS Pixel Ratio and also referred to as dppx) is what determines how a device's screen resolution is interpreted by the CSS. CSS interprets a device's resolution by the formula: device_resolution/css_pixel_ratio. A screen deemed “Retina” has pixels so small that at a given distance from a device you can’t see them individually. Similar to how print resolution works with dots per inch (DPI), a Retina display is all about pixel density. The more image information you have crammed into a fixed area, the more clear it appears.