monitor What Is My Screen Resolution? star

What "Device Pixel Ratio" Actually Measures

Every display has a fixed grid of physical pixels — its native resolution — but web pages are laid out in CSS pixels, a resolution-independent unit. The device pixel ratio (DPR) is the conversion factor between them: how many physical pixels a single CSS pixel is drawn with. On a standard-density screen, DPR is 1 and the two match one-to-one. On a "Retina" or high-DPI screen, DPR is typically 2 or 3, meaning one CSS pixel is actually rendered across a 2×2 (4 physical pixels) or 3×3 (9 physical pixels) block. That is why text and icons look noticeably sharper on those screens: the operating system and browser have four or nine times as many physical dots available to draw the same logical pixel, so curves and edges do not need to be approximated as roughly.

This page reads that number, along with everything else on the card above, directly from real browser APIs: window.screen reports the display's native width, height and color depth, while window.devicePixelRatio reports the CSS-to-physical-pixel ratio. The browser viewport measurements come from window.innerWidth/innerHeight, which is why that number is smaller than the screen resolution — it excludes the space taken by tabs, the address bar and window borders. Resize the window and those figures update live, because they are read directly from the browser, not cached.

Where This Comes In Handy

Typical uses include describing your exact setup to technical support without guessing at numbers, checking what pixel dimensions a responsive design will actually have to work with on your device, confirming that a newly connected monitor negotiated its native resolution rather than a lower fallback mode, or verifying that a TV attached as a second display picked up the correct signal. The one-click copy button grabs a clean text summary of every value, ready to paste straight into a support ticket or bug report.

Color depth, also shown on the card, works on a similar per-channel principle to pixel ratio: a typical 24-bit display allocates 8 bits each to red, green and blue, giving roughly 16.7 million possible colors per pixel, while some professional and HDR displays report 30- or 36-bit depth for finer gradients. Orientation (portrait or landscape) and touch support round out the picture, both read live from the same window.screen and navigator interfaces rather than guessed from screen dimensions or user-agent sniffing.