Detect your screen and viewport details
Instantly detect your screen resolution, browser viewport size, device pixel ratio, color depth, orientation, and touch support. Values update in real-time as you resize your browser. Useful for web developers testing responsive designs.
Screen resolution describes the number of physical pixels on a display, measured in width × height (e.g., 1920×1080 for Full HD). But in web development, what matters even more is the CSS viewport size and device pixel ratio (DPR). On high-DPI (Retina) displays, a single CSS pixel may map to 2, 3, or even 4 physical pixels — which is why images need to be supplied at higher resolutions to appear sharp. Understanding the difference between physical resolution and logical resolution is critical for responsive design, image optimization, and canvas drawing. This detector reveals all key display metrics: physical size, available viewport, color depth, orientation, and DPR — all from JavaScript's screen and window APIs.
Screen resolution is the total physical pixels of your monitor (e.g., 2560×1600). Viewport size is the available area inside the browser window, excluding browser chrome. Viewport is smaller and changes when you resize the window.
DPR indicates how many physical pixels correspond to one CSS pixel. A DPR of 2 means a '400px wide' CSS element is actually rendered at 800 physical pixels — important for sharp images on Retina displays.
Browsers apply a zoom level and exclude UI elements (toolbar, tabs, scrollbars). Also, on mobile devices, the CSS viewport is deliberately different from physical pixels to enable proper web scaling.
Target common breakpoints: 320px (small mobile), 768px (tablet), 1024px (laptop), 1280px+ (desktop). Use CSS media queries to adapt layout to each range rather than designing for specific resolutions.
Use browser DevTools (F12 → Device Toolbar) to simulate specific screen sizes. This tool shows your current actual values — useful for verifying what a real device sees.