Screen resolution sounds like a simple number, but most people can't actually recite theirs — and the figure printed on a monitor's box often isn't what a website sees anyway. This tool reads the values your browser and operating system actually report right now: the full screen resolution, the current browser viewport size, and the device pixel ratio that determines how sharp things look on high-density displays. It's built for the moments when you need an exact number fast — filing a bug report that asks for your display specs, checking whether a design mockup will fit before you build it, or figuring out why a site looks blurry or cramped on your particular setup.
Under the hood it pulls directly from the browser's screen and window APIs: screen width and height for the physical display, innerWidth/innerHeight for the viewport you're actually working in (which shrinks when you resize the window or the sidebar reduces available space), and the device pixel ratio to flag retina and other HiDPI screens where one CSS pixel is rendered using multiple physical pixels. From those readings it also derives the aspect ratio, so you can see at a glance whether you're on a standard 16:9 panel, an ultrawide, or something in between. Resize the browser window or move it to a different monitor and the numbers update immediately, which makes it easy to compare an external display against a laptop screen without digging through system settings.
One practical use: if a webpage looks noticeably softer or fuzzier than expected, a high device pixel ratio (2 or 3) paired with a small viewport often means images are being scaled up rather than served at native resolution — this tool surfaces both numbers side by side so you can spot that mismatch. Everything runs client-side in your browser; nothing about your display or session is uploaded anywhere, so it's safe to use even when troubleshooting on a work or client machine.