Browser & Screen Info

Front-end developers and QA engineers regularly need to know the exact environment their browser is running in: the actual screen dimensions, the viewport the page is rendered inside, the device pixel ratio that determines how many physical pixels back each CSS pixel, and whether the browser has cookies or touch input available. Collecting this information normally requires opening developer tools or writing console commands — this tool surfaces everything in one organised dashboard.

Web designers use it to debug responsive layout issues when a layout breaks at an unexpected breakpoint. Mobile QA testers use it to confirm that a test device's pixel ratio matches the assumed target in their test plan. Accessibility engineers check the reported language preference to verify content is served in the correct locale. All values are read directly from `window.screen`, `window`, and `navigator` APIs in your browser — no data is sent anywhere. The viewport dimensions update live as you resize the window.

Everything shown here is read from properties your browser exposes to any page you visit: viewport and screen dimensions, colour depth, device pixel ratio, user agent string, platform, language, and time zone. Nothing is sent anywhere — the values are read and displayed locally.

The distinction between the dimension figures is the part worth understanding. Screen size is the whole display; viewport is the area actually available to the page, which excludes browser chrome; and device pixel ratio is how many physical pixels make up one CSS pixel, which is why a high-density display reports a smaller CSS viewport than its hardware resolution suggests.

Those are the numbers that matter for responsive design, and they are the ones people most often conflate when a layout behaves unexpectedly.

Individually these values are innocuous; collectively they are identifying. Combining screen dimensions, pixel ratio, time zone, language, platform, installed fonts, and rendering quirks produces a fingerprint distinctive enough to track a browser across sites without any cookie. Seeing the values assembled in one place is a reasonable way to understand what every site you visit can read passively.

That is precisely why browsers have been reducing what they report. User agent strings are being frozen and reduced, and Chrome is moving to User-Agent Client Hints, where detailed information must be requested rather than volunteered. Privacy-focused browsers deliberately randomise or standardise several of these values.

The practical lesson for development is not to branch on the user agent. It has always been unreliable — browsers have spoofed each other's strings for decades, which is why nearly every one still claims to be Mozilla — and it is becoming less informative by design. Detect the capability you need rather than guessing it from an identity string, and use responsive design and media queries rather than device detection.