Device pixel ratio (DPR) checker

What device pixel ratio means

Device Pixel Ratio (DPR), also called CSS pixel ratio, is the ratio between the number of physical hardware pixels on your display and the number of logical CSS pixels. A ratio of 1 means one logical pixel maps directly to one physical pixel. High-resolution screens use multiple physical pixels to render each logical pixel to increase visual clarity.

CSS pixels vs physical pixels

CSS pixels are the units used in stylesheets and layout design to define size and layout constraints. Physical pixels are the tiny individual hardware dots that emit light on your screen. The browser maps CSS layout commands onto physical pixels using the device pixel ratio as a multiplier.

This abstraction ensures web elements look consistent across different displays. Read our explanation of viewports vs resolutions vs DPR to see how these values scale. The resulting browser viewport size — measured in logical CSS pixels — is always smaller than the hardware resolution on high-DPR devices. A high-density screen renders text using more hardware dots to make lines appear sharp rather than blurry.

Why DPR changes with zoom or scaling

Browser zoom alters the number of physical pixels used to render a single CSS pixel. When you zoom in, the browser increases the size of layout elements, which raises the reported device pixel ratio. This change allows content to scale up while maintaining font clarity.

Operating system scaling settings also affect this value. Setting your display scaling to 150% in your system display menu changes the baseline DPR multiplier to 1.5. The browser reads this scaling configuration automatically to adjust page layouts.

How to interpret the DPR result

A DPR value of 1 indicates a standard-density display with a one-to-one pixel mapping. Values of 2 or 3 represent high-density screens, such as Retina displays, where text and images are extra sharp. Decimal values like 1.25 or 1.5 show that fractional system scaling is active on your device.

You can calculate your effective screen resolution by dividing your physical screen resolution by the device pixel ratio. High-DPR screens have a smaller logical viewport size than their actual hardware specifications.

Why developers and designers use DPR

Knowing the device pixel ratio is essential to serving high-quality image assets. Designers provide double-resolution images to prevent blurriness on Retina displays. Modern websites use responsive image markup to load the correct file size depending on the user's screen.

Developers also use this metric to scale HTML5 canvas elements properly. Resizing canvas buffers to match physical pixels avoids pixelation during custom rendering.

You can also target specific density tiers using media queries to load optimized layouts. Read our guide to responsive CSS breakpoints to understand typical design widths.

Canvas pixel-density compensation (JavaScript snippet)

To prevent pixelation on HTML5 canvas elements on high-DPR screens, resize the canvas buffer on the fly while keeping its CSS display size fixed. Use the following code template:

function setupDprCanvas(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  // Scale drawing buffer to match physical pixels
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  // Force layout style to match logical CSS pixels
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  // Scale context drawing actions to hide resolution difference
  ctx.scale(dpr, dpr);
  return ctx;
}

Testing high-DPR layouts on the fly

To verify how your site scales on 2x or 3x screens without buying expensive test devices, use browser emulation:

1. Open Chrome DevTools (F12 or Ctrl+Shift+I).
2. Click the Toggle Device Toolbar icon (or press Ctrl+Shift+M).
3. Click the three dots options menu in the device emulation toolbar and select Add device pixel ratio.
4. Use the dropdown options (e.g. 1.5, 2.0, 3.0) to emulate different pixel density behaviors in real time.

Common device DPR values

The table below shows the typical device pixel ratios for popular devices and display types. These values can vary between models and OS scaling settings.

Related tools and guides

If you want to check other screen parameters, browse our collection of display tools. To go deeper on physical pixel density and understand the difference between software scaling and hardware sharpness, you can calculate your pixel density using the PPI calculator. You can also read our guide explaining DPI vs PPI differences.

Frequently asked questions