Screen & Display guide

What Is Device Pixel Ratio?

Understand how CSS pixels map approximately to device pixels under display scaling and zoom.

By 3 minute readPublished 2026-08-27Reviewed 2026-08-27

Quick answer

What this guide helps you determine

Understand how CSS pixels map approximately to device pixels under display scaling and zoom.

Begin with the observable browser result, repeat it under the same conditions, and change one connection, setting or application at a time. A browser result narrows likely causes but does not certify hardware or decide a repair.

Scope of this check

devicePixelRatio (DPR) expresses the relationship between CSS pixels and device pixels used for rendering at the current scale. It helps pages choose sharper assets, but it is not a direct measurement of screen DPI and may change with operating-system scaling, browser zoom or monitor movement.

Step-by-step method

  1. Record the screen, viewport and DPR at default browser zoom. Multiply CSS dimensions by DPR only as an estimated backing-pixel context, not as proof of the panel specification.
  2. Move the browser fully to another monitor with different scaling and observe whether DPR changes. Then test browser zoom separately and restore it to the original value.
  3. For exact physical density, a reliable panel pixel count and physical dimensions are required. Browsers intentionally do not expose enough stable hardware detail for universal exact DPI detection.

What to check first

Use these checkpoints to keep the comparison focused. Record the visible behavior rather than assigning a fault label too early.

Open Screen Resolution Test

How to read what you see

ObservationWhat it can suggestUseful next check
DPR is 2 at normal zoomRoughly two device pixels are used per CSS pixel in that rendering context.Serve appropriately scaled graphics without identifying the device.
DPR changes across monitorsTheir scaling contexts differ.Recalculate canvas/backing sizes after the move.
DPR changes with zoomBrowser scaling affected the reported ratio.Restore zoom before comparing hardware contexts.

Common mistakes to avoid

Build evidence another person can use

Write down the exact action, visible result and whether it repeats. Include the browser family, operating-system family, connection type and the single comparison that changed the result. Quote the observation directly—for example, “DPR is 2 at normal zoom”—then add where it occurred and which comparison changed it.

Change one condition per comparison and return settings that have no effect. Follow model-specific manufacturer instructions before firmware changes, cleaning, disassembly or warranty action.

When to seek qualified support

If the same problem remains in multiple applications and on another compatible connection or computer, collect the repeatable observations and contact the manufacturer or a qualified technician. Stop using equipment that is physically damaged, unusually hot, wet, sparking or unsafe. Device Test Bench cannot inspect electrical condition or make a repair decision.

Privacy during testing

Our public tests process key events, pointer values, media streams and controller input locally. Do not send private recordings, complete typed text or device identifiers when asking for help. A short description of the behavior, browser and page URL is normally enough.

Questions readers ask

Is DPR always an integer?

No. Values such as 1.25, 1.5 and other fractions are common under display scaling and zoom.

Why do screenshots have more pixels than the CSS viewport?

The browser can rasterize each CSS pixel into multiple device or backing-store pixels according to DPR.

Primary technical references

The following specifications define the browser APIs discussed in this guide. They are primary web-platform references, not product repair manuals.

Published 2026-08-27 · Last reviewed 2026-08-27

Search