Resolution Finder

function getScreenInfo() {
  const dpr = window.devicePixelRatio || 1;
  const cssScreenWidth = Math.round(screen.width);
  const cssScreenHeight = Math.round(screen.height);

  return {
    physicalWidth: Math.round(cssScreenWidth * dpr),
    physicalHeight: Math.round(cssScreenHeight * dpr),
    cssWidth: cssScreenWidth,
    cssHeight: cssScreenHeight,
    availWidth: Math.round(screen.availWidth * dpr),
    availHeight: Math.round(screen.availHeight * dpr),
    viewportWidth: window.innerWidth,
    viewportHeight: window.innerHeight,
    colorDepth: screen.colorDepth,
    pixelDepth: screen.pixelDepth,
    dpr,
    orientation: screen.orientation?.type ||
      (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary"),
    maxTouchPoints: navigator.maxTouchPoints || 0,
  };
}

console.table(getScreenInfo());

Expected output: Outputs physical pixels, CSS pixels, viewport, DPR, orientation, and touch support in one object.

function getAspectRatio(width, height) {
  function gcd(a, b) {
    return b === 0 ? a : gcd(b, a % b);
  }

  const divisor = gcd(width, height);
  return {
    ratio: `${width / divisor}:${height / divisor}`,
    decimal: Number((width / height).toFixed(4)),
  };
}

console.log(getAspectRatio(1920, 1080));
console.log(getAspectRatio(window.innerWidth, window.innerHeight));

Expected output: Returns values like { ratio: "16:9", decimal: 1.7778 }.

function getDisplayType() {
  const dpr = window.devicePixelRatio || 1;

  if (dpr >= 3) return "Super Retina (3x+)";
  if (dpr >= 2) return "Retina / HiDPI (2x)";
  if (dpr >= 1.5) return "High DPI (1.5x)";
  return "Standard (1x)";
}

const supportsHDR = window.matchMedia("(dynamic-range: high)").matches;
const supportsP3 = window.matchMedia("(color-gamut: p3)").matches;

console.log(getDisplayType());
console.log({ supportsHDR, supportsP3 });

Expected output: Returns a density class plus HDR and wide-color support flags.

function onViewportChange(callback) {
  let rafId = 0;

  const handleChange = () => {
    cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(() => {
      callback({
        width: window.innerWidth,
        height: window.innerHeight,
        dpr: window.devicePixelRatio || 1,
      });
    });
  };

  window.addEventListener("resize", handleChange);
  screen.orientation?.addEventListener?.("change", handleChange);

  return () => {
    window.removeEventListener("resize", handleChange);
    screen.orientation?.removeEventListener?.("change", handleChange);
  };
}

Expected output: Calls your callback with fresh viewport values after resize and orientation changes.

function measureRefreshRate() {
  return new Promise((resolve) => {
    const samples = [];
    let last = 0;
    let count = 0;

    function tick(timestamp) {
      if (last) samples.push(timestamp - last);
      last = timestamp;
      count += 1;

      if (count < 60) {
        requestAnimationFrame(tick);
        return;
      }

      const avg = samples.reduce((a, b) => a + b, 0) / samples.length;
      resolve(Math.round(1000 / avg));
    }

    requestAnimationFrame(tick);
  });
}

measureRefreshRate().then((hz) => console.log(`Refresh rate: ${hz}Hz`));

Expected output: Usually resolves to values like 60, 90, 120, or 144 depending on the panel and browser.

function getTailwindBreakpoint(width = window.innerWidth) {
  if (width >= 1536) return "2xl";
  if (width >= 1280) return "xl";
  if (width >= 1024) return "lg";
  if (width >= 768) return "md";
  if (width >= 640) return "sm";
  return "base";
}

console.log(getTailwindBreakpoint());

Expected output: Returns labels like "base", "sm", "md", "lg", "xl", or "2xl".

Step 1

Check the auto-detected result

The Resolution Finder detects your screen information as soon as the page loads. The large card at the top shows the current display snapshot without requiring any clicks.

Step 2

Understand which number to use

Use physical resolution for hardware capability and export planning, CSS pixels for design-system and layout work, and viewport size for the exact browser space available right now.

Step 3

Check your device pixel ratio

DPR tells you how many hardware pixels each CSS pixel maps to. High-DPR screens need 2x or 3x image assets to stay sharp.

Step 4

Note refresh rate and color depth

Refresh rate affects perceived motion smoothness, while color depth reflects how many colors the browser reports the display can represent.

Step 5

Compare with global stats

Use the global comparison section to see whether your detected CSS resolution is common, rising, or relatively uncommon among worldwide web users.

Step 6

Save and share your results

Copy the full spec block for bug reports or QA notes, or generate a share link that encodes the detected snapshot so someone else can review the same values.