What is a Device Pixel Ratio?

DPR (device pixel ratio) is the number of physical screen pixels that correspond to one CSS pixel. A DPR of 2 means every 1x1 CSS square is rendered using a 2x2 grid of physical pixels, producing sharper images on Retina and HiDPI screens.

What DPR do modern phones use?

Most modern iPhones use DPR 3 (Super Retina). Many Android flagships use 2.5–3. Mid-range Android devices are commonly 2. Standard desktop monitors are 1, while many laptop Retina-class screens are 1.5–2.

How do I get the DPR in JavaScript?

Use window.devicePixelRatio. You can also listen for changes with window.matchMedia("(resolution: 2dppx)").addEventListener("change", handler) for multi-monitor setups.

Why do my images look blurry on a Retina screen?

If you serve a 100x100 px image into a 100x100 CSS pixel slot on a DPR 2 screen, the browser stretches it to 200x200 physical pixels and it looks soft. Serve a 200x200 physical image and set width/height to 100 in CSS.

What is the difference between CSS pixels and physical pixels?

CSS pixels (logical pixels) are the unit used by all CSS properties and JavaScript layout APIs. Physical pixels are the actual hardware dots on the panel. On a DPR 1 screen they are identical; on higher-DPR screens one CSS pixel maps to DPR² physical pixels.

Does DPR affect performance?

Yes. A DPR 3 screen needs 9x more pixels to rasterize than a DPR 1 screen at the same CSS size. This matters for canvas drawing, CSS animations, and image memory usage.

Device Pixel Ratio (DPR) Calculator

Enter a logical (CSS) resolution and a DPR to instantly see physical pixel dimensions, plus auto-detect your current browser DPR.

Input

Logical Width (CSS px) Logical Height (CSS px) Device Pixel Ratio (DPR)

Click Detect to read your browser's actual DPR.

Enter dimensions and a DPR, then click Calculate.

Summary

The Device Pixel Ratio (DPR) is the ratio of physical (hardware) pixels to logical (CSS) pixels on a display. A DPR of 2 means a 400x300 CSS element occupies 800x600 physical pixels. This calculator helps you convert between the two spaces and understand your screen resolution.

How it works

Enter the logical width and height in CSS pixels (e.g. 1920x1080 for a Full HD viewport).
Enter the Device Pixel Ratio — common values are 1 (standard), 1.5, 2 (Retina), 2.5, or 3.
The tool multiplies each dimension by the DPR to produce physical pixel counts.
Total pixel counts, aspect ratio, and a visual comparison are shown instantly.
The "Detect" button reads window.devicePixelRatio from your browser to auto-fill the DPR field.

Use cases

Determine the correct image export resolution for Retina/HiDPI screens.
Calculate canvas element dimensions for crisp rendering at high DPR.
Understand why your 1x asset looks blurry on a 2x display.
Verify viewport meta tag behavior on mobile devices.
Generate correct @2x / @3x asset sizes for iOS and Android apps.
Debug CSS pixel vs physical pixel confusion in responsive design.
Compute correct sizes for Open Graph images across device classes.
Estimate memory usage of framebuffers at different DPR levels.

Frequently Asked Questions

Last updated: 2026-05-23 · Reviewed by Nham Vu

Device Pixel Ratio (DPR) Calculator

Input

Details

Area Comparison (CSS vs Physical)

Summary

How it works

Use cases

Frequently Asked Questions

Device Pixel Ratio (DPR) Calculator

Use the Device Pixel Ratio (DPR) Calculator

Input

Details

Area Comparison (CSS vs Physical)

Summary

How it works

Use cases

Frequently Asked Questions