Device Pixel Ratio Checker

Your DPR — the multiplier between CSS pixels and physical panel pixels — with visual examples and image asset size recommendations.

Your device pixel ratio is

… × …

Try resizing this window — all values update live

Viewport→

Color depth

Paste the report into a bug ticket, or send the link to support/QA. Nothing is stored on our servers.

Insight

CSS pixels vs. physical pixels

Every length on the web is specified in CSS pixels, but your display draws physical pixels. The device pixel ratio is the bridge: physical = CSS × DPR. That's why an iPhone reports a 393-pixel-wide viewport while its panel is actually 1179 pixels wide — the DPR is 3.

High DPR is what makes text look crisp on modern phones and "Retina" laptops. It's also why screenshots are bigger than the layout sizes you wrote in CSS. Use the asset advisor above to generate practical image dimensions and responsive snippets, open the full responsive image calculator, or check any phone's exact DPR in our phone screen size chart.

Calculate image assets View phone chart

Where DPR changes the work

Images

A 320 CSS-pixel image slot needs about 640 physical pixels on a DPR 2 display. Generate practical candidates instead of exporting only the largest asset.

Open image calculator

Screenshots

Screenshot files often use physical pixels, so they can be larger than the CSS layout you measured. Divide a screenshot width by DPR to estimate the layout width that produced it.

Canvas

Canvas and WebGL surfaces need a larger backing buffer on high-DPR screens. Size the CSS box for layout, then scale the drawing buffer by DPR for crisp rendering.

Frequently asked questions

› What is device pixel ratio (DPR)?

DPR is how many physical screen pixels are used to draw one CSS pixel. A DPR of 2 means a 100 px-wide CSS element is rendered with 200 physical pixels, making it look sharper at the same visual size.

› Why is my DPR not a whole number?

Operating systems allow fractional scaling — Windows at 125% gives a DPR of 1.25, and many Android phones use values like 2.625 or 3.75. Browser zoom also changes the reported DPR.

› What DPR should I design for?

Provide 1x and 2x image assets at minimum; 3x covers current high-density phones. Use the asset advisor above to turn a CSS image size into exact 1x/2x/3x pixel dimensions and a srcset snippet.

› How do I query DPR in CSS or JavaScript?

In JavaScript: window.devicePixelRatio. In CSS: @media (min-resolution: 2dppx). For images, use srcset with 1x/2x/3x descriptors.