CSS pixel and device pixel are terms related to the resolution and rendering of images and content on screens.
<h2>CSS px</h2>
It is a unit of measurement used in web development to define the size and layout of elements on a webpage. One CSS pixel is equivalent to one "dot" or "pixel" on a standard 96 DPI (dots per inch) screen.
It is a relative unit that allows web designers and developers to specify dimensions that remain consistent across various devices, regardless of their screen resolutions.
<h2>Device px</h2>
A device pixel is the smallest physical unit on a display screen. It corresponds to an individual dot on the screen and is used to determine the screen's resolution. Devices with higher resolutions have more device pixels per inch (DPI), resulting in a crisper and more detailed display.
If you have a smartphone with a 1080p display (1920x1080 pixels), it means the screen contains 1920 device pixels horizontally and 1080 device pixels vertically.
<h2>What is devicePixelRatio ?</h2>
The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio">devicePixelRatio</a> is a JavaScript property that provides information about the ratio between device pixels and CSS pixels on a screen.
<pre class="shiki github-dark shaku"><code>const pixelRatio = window.devicePixelRatio;console.log(`Device Pixel Ratio: ${pixelRatio}`);</code></pre>
For a standard 96 DPI screen, the <code>devicePixelRatio</code> will typically be 1. On high-DPI displays (e.g., Retina displays), the <code>devicePixelRatio</code> is usually greater than 1 (e.g., 2 for a 2x Retina display).

CSS px vs Device px

Do you know the definition of CSS pixel? What does devicePixelRatio mean?…