Screen & Device Info
Live viewport size, screen resolution, device pixel ratio, color scheme, orientation, network type, CPU cores, touch support, and more — everything a frontend developer needs for responsive testing. Updates in real time as you resize the window.
Display
Browser & Platform
User Preferences
Capabilities
About this tool
This page reads the browser, OS, screen, and capability APIs that JavaScript exposes, then shows them in one place so you don't have to dig through DevTools. It updates live as you resize the window, rotate a device, or switch between light and dark mode — useful when debugging a responsive layout or verifying a feature-detection branch.
The viewport badge shows the current CSS pixel dimensions (what your @media (min-width: …) queries actually see), while the screen badge shows the physical display resolution. The device pixel ratio (DPR) bridges them: a 2× DPR means 1 CSS pixel maps to 2×2 physical pixels, which is why Retina screens render text more sharply without changing layout widths.
Below the live badges you'll find the active Tailwind and Bootstrap breakpoints, a reference table of common device widths, and groups of more detailed properties — display, browser & platform, user preferences (color scheme, reduced motion, pointer type), and capabilities (CPU cores, WebGL, WebAssembly, clipboard, push, etc.). Use Copy summary to paste a plain-text snapshot into a bug report.
FAQ
Why is my viewport smaller than my screen? ›
The viewport is the area inside the browser chrome (toolbars, scrollbars, devtools). The screen is the full physical display. On a 1920×1080 monitor with the browser maximised you might see a viewport of around 1920×950 once toolbars are accounted for.
What does device pixel ratio (DPR) mean? ›
DPR is how many physical pixels fit in one CSS pixel. A DPR of 2 means each CSS pixel is drawn as a 2×2 block of physical pixels, giving sharper text and images without changing layout dimensions. Retina phones typically report 2× or 3×.
Are these values accurate on mobile? ›
Most are, but some properties — effective network type, downlink, RTT, device memory, and hardware concurrency — are deliberately clamped or hidden by some browsers for privacy or fingerprinting protection, so they may show as "—" or a coarse value.
What's the difference between this and the Browser Feature Detector? ›
This tool focuses on viewport size, DPR, orientation, breakpoints, device memory, and a concise capability snapshot. The Browser Feature Detector is a deeper feature-support matrix — it tests dozens of image formats (WebP, AVIF, JPEG XL), CSS features (Container Queries, :has(), View Transitions), and modern APIs (WebGPU, Web NFC) that this tool does not cover. Use this for responsive debugging; use the Detector when you need to know exactly which APIs you can rely on.