Screen Resolution Checker

When building websites and web applications, knowing the exact screen properties of the device you are testing on is essential. The Screen Resolution Checker shows you all the relevant dimensions in one place — no browser inspector needed, no digging through system settings. What it shows: Screen resolution — The total pixel dimensions of your physical display, as reported by the operating system. For a 1920×1080 Full HD monitor, this is 1920×1080. For a 4K display, 3840×2160. This is the native hardware resolution, independent of browser zoom or display scaling. Viewport size — The visible area inside your browser window where web content renders. This changes when you resize your browser window, open or close developer tools panels, or change browser zoom level. The viewport is what CSS media queries respond to — @media (max-width: 768px) triggers when viewport width drops below 768px. Device pixel ratio (DPR) — The ratio of physical pixels to CSS pixels. A standard screen has DPR 1 — one CSS pixel equals one physical pixel. A Retina or HiDPI display has DPR 2 or 3, meaning one CSS pixel maps to 4 or 9 physical pixels. Images served without @2x or srcset on a DPR 2 screen look blurry. This tool shows your DPR so you know whether your site needs to serve high-resolution assets. Browser window size — The full outer dimensions of your browser window including browser chrome (toolbars, tabs, address bar). Different from viewport size, which is the content area only. Color depth — The number of bits used to represent each pixel's color. Modern displays are 24-bit (16.7 million colors) or 30-bit for HDR. Use cases: Verifying responsive breakpoints during development, checking if your screen matches a design mockup's assumed resolution, debugging layout issues on high-DPR devices, or reporting your screen setup when asking for design or development help. Results update live when you resize your browser window.