What This Tool Actually Reads
Modern browsers expose every relevant display property through the screen object and the window.devicePixelRatio property. This tool reads all of them and formats the results: CSS screen resolution, physical pixel resolution (CSS × DPR), browser viewport dimensions, device pixel ratio, color depth, advertised color gamut, orientation, aspect ratio, and available screen size. Everything runs in JavaScript on your machine — nothing is uploaded.
CSS Pixels vs Physical Pixels
The big source of confusion: when your phone says "1080 × 2400" physical, the browser reports something smaller like "390 × 844" for screen.width / height. That's because CSS pixels are an abstraction chosen for consistent text size across devices. Multiply by devicePixelRatio (typically 2-3 on phones, 1-2 on desktops) to get the real pixel count. This tool does the multiplication for you.
Color Gamut Detection
The color-gamut CSS media query exposes which color gamut the OS and browser advertise. sRGB is the baseline — every display. DCI-P3 is wide-gamut, covering most modern phones, MacBooks, and premium monitors. Rec. 2020 is the UHD standard — rarely matched fully by consumer hardware. If you're doing color-critical work, this tells you whether the browser will render P3 images at full fidelity or remap to sRGB.
Why The Numbers Might Disagree With Specs
Windows DPI scaling (125%, 150%, 175%) reduces the reported CSS resolution — a 4K display at 150% scale reports as 2560 × 1440. macOS HiDPI similarly reports half-size logical resolutions. Browser zoom changes DPR at non-100% settings. Private or strict-privacy modes (Firefox, Brave) sometimes round values for anti-fingerprinting. If your numbers don't match the sticker on the monitor, check OS scale first.