How to Use This Tool
Everything on this page is read live from your browser and updates as you resize the window. Nothing is sent anywhere.
Three different pixels
- Physical pixels — what the panel actually has. No web API reports this directly.
- CSS pixels — the unit layout is measured in. This is what
screen.width, media queries and every measurement in your stylesheet use. - devicePixelRatio — how many physical pixels fit in one CSS pixel.
So a 1920-pixel monitor at 125% Windows scaling reports 1536, because 1920 divided by 1.25 is 1536. A phone with a 1170-pixel-wide panel and a ratio of 3 reports 390. Both are correct, and both surprise people who expect the number on the box.
Why this exists
When high-density displays arrived, a website designed in physical pixels would have rendered at half the size on a screen with twice the density — unreadable. The fix was to decouple the layout unit from the hardware unit, so a CSS pixel stays roughly the same physical size while the panel underneath gets denser.
The practical consequence for you: images need to be supplied at the higher density even though the
layout is measured at the lower one. An image displayed at 400 CSS pixels wide on a 2× screen should
be an 800-pixel file, which is what srcset and 2x exist to express.
The mobile 100vh problem
On phones, the browser's address bar hides as you scroll and reappears when you scroll up. That changes
the visible height, and for years 100vh referred to the largest height — so a
full-screen element was taller than the visible area and its bottom was cut off.
The modern answer is the dynamic viewport units: dvh tracks the current height,
svh the smallest and lvh the largest. If you have a full-height layout that
misbehaves on mobile, 100dvh is usually the fix.
Values worth knowing about
- Ratio 1 — a standard-density display at 100% scaling.
- 1.25, 1.5, 1.75 — Windows display scaling, extremely common on laptops and the usual reason a "1080p" screen reports something else.
- 2 or 3 — high-density laptop and phone screens.
- Fractional values like 2.625 — some Android devices, where neither the CSS size nor the physical size is a round number.
Do not assume the ratio is an integer, and do not assume it stays fixed — dragging a window between monitors changes it live, which is worth handling if you render to a canvas.
