What is the difference between window size and screen size?

window.innerWidth/Height is the size of the visible viewport inside the browser (excluding browser chrome). screen.width/height is the full physical display resolution of your device.

What are the breakpoint thresholds used?

The breakpoints follow Tailwind CSS defaults: xs < 640 px, sm 640–767 px, md 768–1023 px, lg 1024–1279 px, xl 1280–1535 px, 2xl ≥ 1536 px.

Why does devicePixelRatio matter?

devicePixelRatio tells you how many physical pixels map to one CSS pixel. A value of 2 means a Retina / HiDPI display. This affects image sharpness and SVG rendering.

Screen Size Checker

View window size, screen resolution, pixel ratio, and active breakpoint in real time.

The Screen Size Checker displays live browser viewport dimensions (window.innerWidth / innerHeight), physical screen resolution, device pixel ratio, and current orientation. It also shows which CSS breakpoint (xs, sm, md, lg, xl, 2xl) is currently active based on standard Tailwind-style width thresholds. Resize the window to see values update instantly.

Reading screen info...

Related Tools

DEVDevice Info Viewer

Display navigator properties: user agent, platform, language, hardware concurrency, and more.

BRWBrowser Info

Detect browser name, version, OS, and check support for key web APIs.

FAQ

What is the difference between window size and screen size?: window.innerWidth/Height is the size of the visible viewport inside the browser (excluding browser chrome). screen.width/height is the full physical display resolution of your device.
What are the breakpoint thresholds used?: The breakpoints follow Tailwind CSS defaults: xs < 640 px, sm 640–767 px, md 768–1023 px, lg 1024–1279 px, xl 1280–1535 px, 2xl ≥ 1536 px.
Why does devicePixelRatio matter?: devicePixelRatio tells you how many physical pixels map to one CSS pixel. A value of 2 means a Retina / HiDPI display. This affects image sharpness and SVG rendering.