utilyfe

Screen Resolution Test

Resolution, viewport, DPR, colour gamut, HDR and an estimated refresh rate, all on one screen.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Your display

0 × 0

Screen resolution · 0 px

Device pixels 0 × 0 · below 1080p

Viewport size
0 × 0
Device pixel ratio
1×
Colour depth
0-bit
Aspect ratio
-
Colour gamut
Unknown / narrower than sRGB
HDR support
Not detected
Touch support
No touch detected
Refresh rate
Measuring…
PNG, made in your browser

Refresh rate

…measuring

Colour gamut & HDR

  • sRGB: no
  • Display P3: no
  • Rec. 2020: no
Unknown / narrower than sRGB: widestHDR not detected

What your DPR means

1 CSS pixel = 1 physical pixel

Your DPR is 1×, so the page is drawn pixel for pixel, with no scaling.

Copy the spec

{
  "screenWidth": 0,
  "screenHeight": 0,
  "viewportWidth": 0,
  "viewportHeight": 0,
  "devicePixelRatio": 1,
  "colorDepth": 0,
  "colorGamut": null,
  "hdr": false,
  "touchPoints": 0,
  "refreshRateHz": null,
  "devicePixelWidth": 0,
  "devicePixelHeight": 0
}
Also try:PX to REM ConverterREM to PX ConverterColor Contrast Checker

How to use the Screen Resolution Test

  1. 1Open the page. Every figure appears in the "Your display" card straight away, no click needed.
  2. 2Resize the window, or drag it to another monitor, to watch the viewport and DPR figures update live.
  3. 3The refresh rate is measured automatically for about a second when the page opens; press "Test again" to re-measure, for example after moving to another monitor.
  4. 4Pick JSON, CSS or Markdown with the format switcher, then press Copy to grab the full spec in that format.
  5. 5Press "Share your display" (or "Download your display") to save the card as an image with every figure on it.

Why two different “sizes” show up

Every modern display has two numbers that both look like a resolution but answer different questions. Screen resolution is the physical pixel grid your monitor or panel actually has. Viewport size is how many CSS pixels your browser window has to lay out a page in, and on a high-DPI screen, those numbers are deliberately different: your OS scales the display so text and UI aren’t rendered pixel-for-pixel tiny, which is exactly what device pixel ratio (DPR) measures. A DPR of 2 means every CSS pixel is drawn with a 2×2 block of physical pixels.

Colour gamut and HDR, not just size

Two screens can share the exact same resolution and still show colour very differently. The color-gamut media feature reports the widest colour space your display can reproduce: srgb, the older, narrower web standard; p3, Apple’s Display P3 and similar wide-gamut panels; or rec2020, the widest tier, mostly high-end HDR reference monitors. These are cumulative: a p3 display also matches srgb, so this page reports the widest one that matches rather than every one that does. dynamic-range: high reports whether the display can render actual HDR content: brighter highlights and deeper contrast than a standard-range screen assumes.

Why the refresh rate is an estimate, not a spec

Browsers don’t expose a direct API for a display’s refresh rate. This page samples requestAnimationFrame timestamps for about a second, takes the median gap between frames (median rather than mean, so one delayed frame doesn’t skew the result), and converts that to Hz. It’s a genuinely useful approximation: 60Hz, 90Hz, 120Hz and 144Hz panels come out clean in a normal tab, but a background tab, heavy CPU load, or a variable-refresh-rate display can pull it off.

Everything in one copy-ready spec

Once every figure is on the page, the format switcher turns the whole thing into something you can paste straight into a bug report, a support ticket, or your own CSS: plain JSON for a script or an issue tracker, a ready-to-edit @media query for your stylesheet, or a Markdown table for a wiki page or a GitHub comment.

Questions

Is my screen or display data sent anywhere?
No. Every figure here (resolution, viewport, DPR, colour gamut, HDR, touch and refresh rate) is read directly from your browser's own APIs in this tab. There are no network requests; you can confirm it yourself with your browser's DevTools open on the Network panel.
Is the shared image of my display uploaded anywhere to be generated?
No. The image is drawn entirely with the Canvas API in this browser tab, then either handed to your device's native share sheet or downloaded directly: neither step involves a server. If your browser and device support the Web Share API you'll see a Share button; otherwise it downloads as a PNG you can share however you like.
Why doesn't the resolution shown here match my OS display settings?
The big number is what your browser reports, in CSS pixels. Multiply it by your device pixel ratio (DPR) and you get the "Device pixels" line: how many pixels your system actually draws. A 4K screen at 200% scaling reports 1920 × 1080 at a DPR of 2, and 3840 × 2160 device pixels. On Windows and Linux that's usually your panel's native resolution. macOS often draws at a larger size and scales down to fit the panel, so on a Mac the panel's own resolution can be a little lower. Browser zoom changes DPR too, so reset zoom to 100% for an accurate reading. The 1080p, 1440p and 4K outlines compare against device pixels.
How accurate is the refresh-rate estimate?
It's an estimate from about a second of sampled animation frames, not a value read from a hardware descriptor: browsers don't expose a direct "get refresh rate" API. It's usually close for common rates (60Hz, 90Hz, 120Hz, 144Hz), but throttling, background tabs, or a variable-refresh-rate display can shift it. Treat it as a strong hint, not a spec sheet.
What do colour gamut and HDR support actually mean?
Colour gamut is how wide a range of colours your display can show: sRGB is the old web standard, Display P3 is wider (most modern Apple and many premium displays), and Rec. 2020 is wider still (high-end HDR monitors and TVs). HDR support means the display can hit a higher peak brightness and contrast than standard content assumes. Both come straight from your browser's `color-gamut` and `dynamic-range` media features.