Screen Size Detector
Detect your viewport size and screen resolution instantly. See dimensions update in real-time as you resize the browser window. Free, 100% in your browser.
Reference
Viewport vs screen resolution — what is the difference?
Viewport is the visible area of a web page inside the browser window, measured in CSS pixels (window.innerWidth × window.innerHeight). It changes when you resize the browser or open DevTools. Screen resolution is the total pixel count of your physical display (screen.width × screen.height) — this is fixed by your hardware and display settings. For responsive web design, the viewport is what matters — it determines which CSS media queries and breakpoints are active.
What is device pixel ratio (DPR)?
The Device Pixel Ratio (DPR) tells you how many physical (hardware) pixels map to one CSS pixel. A DPR of 1 means 1:1 mapping (standard displays). A DPR of 2 means a Retina/HiDPI display — each CSS pixel is rendered with 4 physical pixels (2×2), producing sharper text and images. A DPR of 3 is common on high-end smartphones. This matters for: serving @2x/@3x images to high-DPR screens, understanding why screenshots on Retina displays are twice the expected resolution, and debugging layout issues that only appear on specific DPR values.
Use cases for screen detection
Responsive design testing — verify CSS breakpoints fire at the correct viewport widths without opening DevTools. Bug reports — share exact viewport dimensions, screen resolution, and DPR when reporting display issues to developers. Screenshot planning — know exact dimensions before taking screenshots for documentation or app store listings. Ad & banner sizing — verify viewport dimensions match required ad slot sizes for display advertising.
Privacy
Screen dimensions are read locally from your browser APIs. No data is sent to any server.