Diagnostics

Screen size and environment diagnostics

Detailed information about your screen, browser and device. Real-time data useful for everyday users, web designers and developers alike.

Screen

Viewport — visible browser area
— × — px
The space the user actually sees inside the browser. This is the reference value for @media rules in CSS and for Bootstrap breakpoints.
Active Bootstrap 5 breakpoint
— —
Name of the Bootstrap 5 breakpoint matching the current window width. Determines which col-*, d-* and fs-* classes are active right now.
Logical screen resolution
— × — px
Total screen resolution in CSS (logical) pixels. This is what the operating system reports to the browser. Does not subtract the taskbar.
True physical resolution
— × — real px
Hardware physical pixels: logical resolution × DPR. This is the figure shown in the manufacturer's technical specifications.
Available screen (minus taskbar)
— × — px
Usable screen area after subtracting the OS taskbar and other fixed desktop elements.
Device Pixel Ratio (DPR)
— x
Ratio of physical pixels to CSS pixels. DPR 2 = Retina / HiDPI display. Critical for correctly scaling images with srcset.
Colour depth
— bits
Bits per pixel for colour representation. 24 bits = 16.7 million colours (true colour). Most modern displays report 24 or 30 bits.
Device orientation
—
Current physical orientation. Changes when the device is rotated. Relevant for @media (orientation: landscape). Updates automatically.
HTML document — total content area
— × — px
Total size of the HTML document, including content outside the viewport (scroll). If the document width exceeds the viewport width there is horizontal overflow — a CSS problem.

Browser

Name and version
—
Rendering engine
—
Component that interprets HTML and CSS. Blink (Chrome/Edge), WebKit (Safari), Gecko (Firefox). Differences between engines explain visual inconsistencies across browsers.
Browser language
—
Language configured in the browser (navigator.language). Websites can use it to show content in the preferred language without the user having to select it.
Time zone
—
System time zone detected by the browser. Useful for apps that need to display local dates and times without prompting the user to configure it.
Cookies enabled
—
If disabled, sites cannot save sessions or preferences. Affects the operation of most web applications.
Connection status
—
Detected via navigator.onLine. Useful for apps with offline support (PWA). Indicates whether the browser has network access right now.
User Agent
—
String sent by the browser to the server with every HTTP request. Allows detection of the browser, version and operating system. Also used for audience analytics and content personalisation.

Device

Operating system
—
Detected from the User Agent. Useful for diagnosing platform-specific compatibility issues (Windows, macOS, iOS, Android).
Device type
—
Shows whether the device has a touchscreen and how many simultaneous touch points it supports (navigator.maxTouchPoints). 0 = no touchscreen.
Available CPU cores
— logical cores
Logical processors available to the browser (navigator.hardwareConcurrency). Indicates the degree of parallelism possible with Web Workers and background tasks.
Approximate RAM
—
Available in Chrome and Edge (navigator.deviceMemory). The browser reports a rounded value (0.25, 0.5, 1, 2, 4 or 8 GB) to protect user privacy.

Share diagnostics

Copy all data as plain text to paste into an email, Slack or support ticket.

What does each reading mean?

Detailed explanation of each metric shown by this tool. Whether you are a designer, developer or everyday user, this glossary will help you interpret the values correctly.

The viewport is the region of the browser that displays a web page's content. It is the available width and height inside the window, not counting the toolbar, tabs or scrollbar.

In CSS, the viewport is the reference for media queries: @media (max-width: 768px) activates when the viewport width is less than 768 px. It is also the basis for the units vw (viewport width) and vh (viewport height).

In JavaScript it is obtained with window.innerWidth and window.innerHeight.

Breakpoints are the points at which responsive design changes its behaviour. Bootstrap 5 defines 6:

  • xs — less than 576 px (small phones in portrait)
  • sm — from 576 px (phones in landscape)
  • md — from 768 px (tablets)
  • lg — from 992 px (laptops)
  • xl — from 1200 px (desktops)
  • xxl — from 1400 px (large screens)

Knowing your breakpoint tells you exactly which Bootstrap CSS classes are active: col-md-6, d-lg-flex, etc.

The Device Pixel Ratio is the ratio between the hardware's physical pixels and the logical CSS pixels the browser uses to calculate the layout.

  • DPR = 1 — Standard display. 1 CSS px = 1 physical px.
  • DPR = 2 — Retina / HiDPI. 1 CSS px = 2×2 = 4 physical px.
  • DPR = 3 — High density (modern phones). 1 CSS px = 3×3 = 9 physical px.

This is critical for designers: a 200×200 px image on a DPR 2 screen will look blurry. The fix is to use srcset or image-set().

Access it in JavaScript with window.devicePixelRatio.

Logical resolution is what the browser uses to calculate layout (CSS pixels). Physical resolution is the actual number of pixels on the panel: logical resolution × DPR.

For example, an iPhone 15 has a logical resolution of 390×844 CSS px, but its physical screen is 1170×2532 real px (DPR = 3). Physical resolution is the figure listed in the manufacturer's specifications.

The document size includes all content, including what lies outside the viewport (scroll). In normal conditions, the document width should equal the viewport width.

If the document width exceeds the viewport, there is horizontal overflow: a horizontal scrollbar appears, backgrounds don't reach the edge, or content spills outside the visible area on mobile. Use document.documentElement.scrollWidth.

The User Agent is a text string the browser sends to the server with every HTTP request via the User-Agent header. It contains information about the browser, its version and the operating system.

Servers and web applications parse the User Agent to detect the type of client, serve optimised resources, personalise content and generate audience analytics.

The rendering engine interprets HTML and CSS and draws the page on screen. The main ones are:

  • Blink — Chrome, Edge, Opera, Brave and most Chromium-based browsers.
  • WebKit — Safari on macOS and iOS. By Apple policy, all browsers on iOS must use WebKit.
  • Gecko — Mozilla Firefox.

Differences between engines explain why the same page can look different in Safari and Chrome.

Via the Network Information API (available mainly in Chrome and Edge), the browser can estimate: effective connection type (4g, 3g, 2g, slow-2g), download speed in Mbps, RTT latency in ms and whether the user has data saver mode enabled.

This section does not appear if the browser does not support the API (Firefox and Safari do not expose it for privacy reasons).