Screen Resolution Tester - Display Info
Check your screen resolution, viewport size, pixel ratio, and current responsive breakpoint. Updates live as you resize.
Runs in your browser. No data leaves your device.
Frequently Asked Questions
How does the Screen Resolution Tester work?
The tool reads screen dimensions from window.screen.width/height (physical resolution) and window.innerWidth/innerHeight (viewport). Device pixel ratio comes from window.devicePixelRatio. A resize event listener updates all values live as you change the browser window. The current responsive breakpoint is determined by comparing innerWidth against standard Tailwind CSS thresholds (640, 768, 1024, 1280, 1536px).
What is the difference between screen resolution and viewport size?
Screen resolution is the total number of physical pixels your display has. Viewport size is the area available for web content, which is smaller because it excludes browser chrome, toolbars, and scrollbars.
What is device pixel ratio?
The ratio between physical pixels and CSS pixels. A ratio of 2 (common on Retina/HiDPI displays) means each CSS pixel is rendered using 4 physical pixels (2x2), resulting in sharper text and images.
Does it update in real time?
Yes. Resize your browser window and the values update live. This is useful for web developers testing responsive breakpoints and layout behavior at different viewport sizes.