CSS Pixels to Device Pixels Converter: CSS Pixel Ratio Math
CSS Pixels to Device Pixels Converter. Enter a CSS width and height, or click Detect My DPR, to convert css pixels to device pixels at any pixel ratio. The monitor viewing distance calculator tool breaks the math down step by step so the answer is never a black box.
Interactive Tool
Use the CSS Pixels to Device Pixels Converter to see how many physical device pixels a CSS dimension actually renders to at a given device pixel ratio (DPR). Enter a CSS Width and CSS Height, click Detect My DPR to pull your own screen's ratio (or type one in manually), and you'll get the physical Device Pixel Size plus a ready-made table of 1x / 2x / 3x export sizes for handing off to a designer.
A CSS pixels to device pixels converter answers one question you hit the moment you build for high-density screens: how many real dots does a CSS length light up? Multiply by the display's density ratio and you get the exact device pixel count for any mobile or desktop screen, which tells web developers how large to export images and why a 1px line can look thin on one phone and fuzzy on another.
The CSS Pixels to Device Pixels Converter Formula
To convert CSS pixels into device pixels, multiply the CSS length by the display's density ratio. To go the other way, divide. Use the screen diagonal to width height calculator tool any time you need a fast, accurate figure without doing the arithmetic yourself.
$$\text{device pixels} = \text{CSS pixels} \times \text{ratio} \qquad \text{CSS pixels} = \frac{\text{device pixels}}{\text{ratio}}$$The ratio is per axis, so a width and a height each get multiplied once. Take a 15.6-inch notebook running at 125%: it reports a 1536 × 864 viewport, and \(1536 \times 1.25 = 1920\) by \(864 \times 1.25 = 1080\) gives the panel's native grid. The same arithmetic gives you the effective pixel width of the screen width a page actually renders into.
For an image slot, the multiplier works on the picture width. A card image set to width: 340px on a phone with a DPR of 2.5 needs \(340 \times 2.5 = 850\) image pixels across to stay sharp. Dividing a file's pixel width by the viewport width you show it at gives you the descriptor you would write next to it, such as 1.5x, 2x or 3x.
| CSS width | Ratio | Device pixels | Typical display |
|---|---|---|---|
| 1536 | 1.25 | 1920 | Laptop at 125% scaling |
| 340 (image slot) | 2.5 | 850 | Mid-range Android phone |
| 375 | 3 | 1125 | Large phone |
| 1 (border) | 1.75 | 1.75 | Fractional-scale tablet |
Fractional Ratio Results and Anti-Aliasing
A fractional ratio such as 1.75 means a 1px border covers 1.75 device dots. The rasterizer can't light three-quarters of a dot, so it uses anti-aliasing to blend the partial dot with the background. On a 600 dppi printer the same line spans 6.25 dots for the same reason.
What a Physical Pixel Is
A physical pixel is one of the hardware dots that make up a panel. A monitor sold as 2560 × 1440 has exactly that many physical pixels, and nothing you do in software changes the count. Each device pixel shows one full colour on its own, which is why the advertised screen resolution always refers to these screen pixels. The monitor desk depth calculator online breaks the math down step by step so the answer is never a black box.
When a CSS pixel maps onto a 2x2 grid of physical pixels, you have a ratio of 2; a 3x3 grid means 3. The panel never changes, only how many of its dots one CSS unit borrows.
The CSS Pixel as a Reference Pixel
A CSS pixel is not a dot at all. The specification defines it as a reference pixel: exactly 1/96 of a CSS inch, tied to a typical viewing distance. That is why 96px always adds up to one inch in your stylesheet, while the inch you measure with a ruler drifts. On a 140 ppi notebook screen drawing one dot per CSS unit, a CSS inch comes out at 96 ÷ 140 ≈ 0.69 real inches. The px unit is a length, like mm or pt; physical units only line up with real-world measurements on high-resolution output.
Logical Pixels and Logical Resolution
Between the hardware and the web page sits the operating system. It maps logical pixels (also called device-independent pixel units) onto physical ones, so a 100-wide logical pixel box looks about the same size on any screen. Change the scaling in Display Settings and you change the logical resolution, not the panel. Chrome, Safari and Firefox usually make one CSS pixel equal one logical pixel at the default 100% scale.
DPR on Retina and High-Density Screens
The DPR is the number of device pixels one CSS pixel spans in each direction. Older office displays ran at 1. Retina and other hi-DPI panels run at 2 or 3, and many Android phones sit at fractional values like 2.625. Some writers call this the density display factor or the css pixel ratio. The jump started with smartphones: a smartphone, tablet or iPhone that copied a laptop's native grid would render a desktop site at full width in a palm-sized space. A Samsung Galaxy phone with 1080 dots across and a ratio of 2.8125 instead reports a CSS viewport of 384, so mobile layouts still work.
CSS Resolution vs Device Resolution
The CSS resolution is the size your stylesheet and media queries see; the device resolution is the panel's real dot count. Divide the panel's dot count by the ratio and you get the CSS resolution. Spec sheets list the high resolution figure only, so a phone advertised at 1080 × 2400 with a DPR of 2.625 has a CSS resolution of about 411 × 914. Two phones with the same screen size can have very different CSS resolution values, while a low resolution budget panel may report a ratio of 1.
Pixel Density, Pixels Per Inch and Hardware Pixel Size
Pixel density is measured in pixels per inch (PPI). It describes how small each hardware pixel is, and a higher density makes text sharper and edges crisp. Density doesn't feed into CSS layout directly; the ratio does. Two screens with 401 and 460 dots per inch can both report a ratio of 3.
This is what resolution independence is for: you describe shapes in CSS units and let the rendering engine map them to dots at runtime. Scalable Vector Graphics follow the same model, since an SVG user unit equals the CSS reference length, which is why vector icons stay sharp at any ratio. A canvas element is the exception: you must size its backing store in device pixels yourself, or its drawing looks blurred.
Viewport Types That Set the CSS px Width
The CSS px width you design against comes from the viewport, and there are three of them:
- Layout viewport: the area CSS layout is calculated against.
- Visual viewport: the part of the page the user currently sees, which shrinks when they pinch in.
- Ideal viewport: the layout width that suits the device, in CSS pixels.
Phones only use the ideal width when your HTML asks for it:
<meta name="viewport" content="width=device-width, initial-scale=1">device-width makes the layout viewport match the ideal one, and initial-scale sets the starting scale. With this tag in place, the width your media queries see is the ideal one, and that is the number you multiply: a 390px-wide page at a ratio of 3 fills 1170 hardware dots. Without it, phones fake a wide page, and both your responsive design and the conversion work from the wrong width.
How Browser Zoom Changes the Device Pixel Ratio
Page zoom is the one input that changes the ratio after a page loads. At 150% zoom on a double-density screen, each CSS unit spans 3 device dots, so the page sees a ratio of 3 and fewer CSS pixels fit across. innerWidth shrinks as you enlarge the page, while screen.width usually stays fixed. Moving a window between a 1x external display and a 2x built-in panel changes the ratio too. If you cache a conversion result, recompute it on every resize event, because the scale may have moved.
Serving Responsive Images by Device Resolution
Device resolution matters most for media. A bitmap displayed at a CSS width of 280px on a 3x screen has 840 device dots to fill, so a 280-wide file gets stretched and looks soft. Responsive images fix this with the HTML srcset attribute:
<img src="chart-480.png" srcset="chart-480.png 1x, chart-960.png 2x" alt="Sales chart">The browser picks the file whose image pixels best match its own ratio. Don't send the largest file everywhere: a 1x office monitor can't show the extra detail, so those kilobytes are wasted. Keep the same aspect ratio across every candidate file so rendering doesn't jump when a sharper version loads.
How Px, Rem and Em Reach the Screen Through the DPR
Every unit ends up in the same converter formula: it is first resolved to a length in pixels, then the ratio multiplies that into dots. A 1rem margin on a page with a 16px root font size is 16px in CSS and 32 device dots at a ratio of 2; the table runs each common unit through that chain.
| Unit | Resolves to | Device dots at a ratio of 2 |
|---|---|---|
| px | 1/96 inch | 2 per px |
| rem | Root element font size (16px by default) | 32 at the 16px default |
| em | Current element's font size (compounds when nested) | 28 per em on 14px text |
| vw | 1% of the viewport width | 7.8 when the page is 390px wide |
| vh | 1% of the viewport height | 16.88 when it is 844px tall |
The unit you pick still matters for accessibility: px lengths scale with browser zoom but ignore the user's default font size setting, so set font and spacing values in rem and keep px for borders and breakpoints. The device pixel math comes out the same either way, and that single rule is what keeps web development across hundreds of screen types predictable.
Checking DPR with window.devicePixelRatio in Chrome DevTools
JavaScript exposes the ratio on the window object. Paste this into the console to see every number from the converter formula at once:
const w = innerWidth; console.log(w, w * devicePixelRatio);To test other displays, open Chrome DevTools, turn on the device toolbar and set the DPR field to 1, 2 or 3. The rendered page shows how your CSS and images hold up at each resolution without needing the actual screen in your hand.
Frequently Asked Questions
- What is a CSS pixel and how does it differ from a device pixel?
- A CSS pixel (also called a logical pixel) is an abstract unit used in web design that represents a consistent visual size regardless of screen density. A device pixel (or hardware pixel) is an actual physical dot on a screen. On standard 1× displays they are the same, but on Retina or HiDPI displays, one CSS pixel maps to 2 or more device pixels, producing sharper visuals.
- What is the Device Pixel Ratio (DPR)?
- The Device Pixel Ratio (DPR) is the ratio of physical (device) pixels to CSS (logical) pixels on a screen. A DPR of 2 means that for every 1 CSS pixel, there are 2 physical pixels in each dimension — or 4 pixels in total area. You can check a device's DPR in JavaScript using window.devicePixelRatio.
- How do I convert CSS pixels to device pixels?
- Multiply your CSS pixel value by the Device Pixel Ratio. For example, a 200px CSS element on a display with a DPR of 2 occupies 400 device pixels linearly (and 200×200 = 40,000 CSS pixel area vs 400×400 = 160,000 device pixel area).
- What DPR does an iPhone or MacBook Retina display use?
- Most iPhones (non-Pro) and MacBook Retina displays use a DPR of 2×. iPhone Pro models (e.g. iPhone 14 Pro and later) typically use a DPR of 3×. You can confirm the exact value for any device using window.devicePixelRatio in a browser console.
- Why does DPR matter for web and app development?
- DPR matters because images and graphics defined in CSS pixels may appear blurry on high-density screens if not provided at the correct resolution. For a 2× display, images should be served at double the CSS dimensions to appear crisp. This is commonly handled with srcset attributes, CSS media queries targeting device-pixel-ratio, or the HTML canvas scaling technique.
- Does a higher DPR always mean better image quality?
- A higher DPR gives you more physical pixels to render each CSS pixel, which can produce sharper text and images. However, it also means your graphics files need to be larger to take full advantage of the display. If you serve a standard-resolution image on a 3× screen, it will appear blurry compared to one served at the native resolution.
- How is CSS px different from Android dp (density-independent pixels)?
- Android dp is similar in concept to CSS px — both are device-independent units designed to look consistent across screens of different densities. On a 160 DPI baseline screen, 1dp ≈ 1 physical pixel, similar to how 96 CSS px ≈ 1 inch at standard density. While the concepts align closely, they come from different ecosystems and should not be considered fully interchangeable without accounting for platform-specific density values.
- Can the Device Pixel Ratio be a non-integer value?
- Yes. Some devices — particularly certain Android phones and Windows laptops — have fractional DPR values like 1.5× or 2.5×. This can sometimes cause sub-pixel rendering issues where pixels don't align perfectly to physical pixels, potentially causing slight blurriness on borders or fine lines.