What is devicePixelRatio?

The ratio of physical device pixels to CSS pixels. Retina displays typically report 2 (one CSS pixel = 2x2 device pixels); high-DPI Android phones often report 2.5-4.

Why does my image look blurry?

If the image's intrinsic size matches CSS pixels on a 2x display, the browser upscales it to fill device pixels. Ship 2x or use srcset to provide sharp variants.

Does the DPR change at runtime?

It can — moving a window between a Retina and a non-Retina display, or zooming in the browser, changes the value. The tool listens for those events.

Is the data sent anywhere?

No. Everything is read locally.

devicePixelRatio · viewport · screen · live

Measure your display's pixel ratio

See devicePixelRatio, CSS-pixel dimensions, and the underlying device pixels in one panel. Updates live as you resize or move between monitors.

Device Pixel Ratio Meter

DPR

—

CSS px

—

viewport

Device px

—

actual

Status

—

MQ + resize

input · context

devicePixelRatio is the multiplier between CSS pixels and physical screen pixels. Retina displays read 2x, Pixel/Android phones often 2.625x or 3x.

Drag the window between an external monitor and your built-in display to watch this number flip live.

Browser zoom changes DPR too — Ctrl++ raises it.

output · measurements

Measuring…

Quick Start

How to read the meter

Every CSS pixel covers DPR × DPR device pixels. Knowing your viewport in both units helps you debug blurry images and crisp text rendering.

01
Read the DPR
Big number at the top — usually 1, 2, or 3.
Inputs are treated as UTF-8 throughout the pipeline and validated client-side as you type — nothing dispatches until the value is well-formed.
dprinpututf-8client-sidevalidated
dpr · text2 · set
```
DPR = 2
```
loaded · parsedclient-side
02
Compare units
CSS vs device dimensions sit side by side.
Each toggle re-computes through a memoised hook, so flipping options never resets your input and the UI stays snappy on large inputs.
compareoptionslivememoisedtoggles
css · memoiseddevice · live
```
1440x900 vs 2880x1800
```
options set · memoisedlive
03
Move between monitors
Drag the window across displays and watch values change.
Randomness — where used — comes from crypto.getRandomValues, never Math.random. Heavy work sits in useMemo.
livecomputeinstantlocaldeterministic
live · instantMQ · computed
```
switching…
```
computed · instantinstant
04
Use the numbers
Plug them into your media queries and image asset choices.
Copy writes through navigator.clipboard and downloads use a Blob — zero network traffic. Same input plus same options always yield the same bytes.
usecopydownloadzero-networkreproducible
ok · copiedready · copied
```
Plan applied
```
shipped · ready to shipsuccess

Pro tips

Pro tips for everyday utilities

Reach for crypto.getRandomValues

Cryptographically random for IDs, tokens, salts. Math.random is for animation and games, not security.

Sort IDs lexicographically

UUID v4 has no time ordering. Use ULID or UUID v7 if you need sorted IDs.

Mock data with seeds

Faker-style libraries can be seeded so tests are reproducible. Embed the seed in the fixture file.

Reference cards beat memory

Cheatsheets for Vim, Git, Docker, Linux signals are faster than man pages when you’re mid-flow.

Browser APIs vary

Touch events, gamepads, and clipboard differ across vendors. Feature-detect before use.

Persist in the right place

localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data.

Use Cases

When to check pixel ratio

Responsive design, asset selection, debugging.

Asset selection

Decide whether to ship @1x, @2x, or @3x sprites. Random values come from crypto.getRandomValues — cryptographically secure for tokens, salts, and session IDs. Math.random is deterministic enough for animations but predictable enough to be a security bug.

CSPRNG-backed

Canvas DPI

Scale a 2D canvas backing store to match DPR. Pair with hashids, ULID, or UUID v7 when you need both random and sortable — useful for primary keys, public-facing IDs, and event log ordering without a sequence column.

reproducible

Crispness audits

Confirm 1px borders look sharp on Retina. Output is deterministic given the same seed, so fixtures and tests stay reproducible across CI runs and contributor machines. Embed the seed in the fixture file for full replay.

snappy

Media queries

Build resolution-aware breakpoints with min-resolution. Heavy work runs through useMemo so the UI stays snappy on large inputs. Same input + same options yields identical bytes — the kind of stability snapshot tests rely on.

feature-detected

Bug triage

Capture the DPR when filing a visual regression. Storage tools persist to the right backend: localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data. Pick the right shelf and quota worries disappear.

deterministic

Print previews

Reason about CSS pixels vs device pixels in print stylesheets. Browser feature detection: clipboard, fullscreen, gamepad, and Web Bluetooth APIs gracefully fall back when unavailable. No surprise white screens on Safari or older Firefox.

production-ready

FAQ

Frequently asked questions

Why does zoom change the DPR?

Browser zoom rescales CSS pixels relative to device pixels. Setting zoom to 200% essentially doubles the DPR.

Does mobile DPR include Safari toolbar?

Yes — innerWidth/innerHeight include the chrome. Use visualViewport for the unobscured area.

Can I detect external displays?

Not directly. matchMedia notices DPR changes when the window moves to one.

Are these numbers reliable in iframes?

Yes — every frame sees its own context.

Is anything sent to a server?

No. Measurements happen entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!