A CSS layout width is not necessarily the bitmap width needed for a sharp canvas or image. Enter the CSS box dimensions and the device pixel ratio for the target display.

Formula: backing width = round(CSS width × DPR); backing height = round(CSS height × DPR)

Worked example

An 800 × 600 CSS-pixel box at DPR 2 calls for a 1,600 × 1,200 device-pixel backing bitmap, or 1,920,000 pixels. Its CSS layout still occupies 800 × 600 CSS pixels.

What DPR measures

The browser devicePixelRatio value is physical device pixels per CSS pixel for its current display and zoom state. It is a raster scale, not pixels per physical inch. MDN uses this ratio to size a canvas backing store while preserving its CSS display size.

Round each edge, then multiply

A fractional ratio can produce fractional backing dimensions. The calculator rounds width and height separately to whole pixels before multiplying them for the pixel count. A renderer may make slightly different rounding choices; inspect its actual dimensions when one pixel matters.

A useful boundary

This calculation does not tell you print size, monitor PPI or saved file bytes. Use the main pixel-to-inch tool for a print, or the image file-size calculator for raw storage. Inputs stay in this browser.

Explore the related calculation

For a different starting point, try the screen PPI calculator or return to the main calculator. Browse the complete tool directory for this site.

Reference and corrections

The definitions and assumptions above follow these sources; the examples and calculator arithmetic are original to this page.

developer.mozilla.org reference

Found a problem? Email contact@pixelstoinches.org.

CSS pixels to device pixels

Enter your values

Result