Screen Inspector — Real-Time Screen & Viewport Information
Screen Inspector is a browser-based online tool that instantly displays comprehensive screen and viewport parameters for your current device—no installation required. Whether you're a front-end developer, UI/UX designer, or just curious about your device's display specs, this tool gives you all the data you need at a glance.
Core Features
- Screen Resolution: The physical pixel dimensions of your display (e.g. 1920×1080).
- Viewport Size: The CSS pixel dimensions of the browser's visible area, updated in real time as you resize the window.
- Available Screen Size: The usable screen area after excluding the OS taskbar and system UI.
- Device Pixel Ratio (DPR): The ratio of physical pixels to CSS pixels, indicating whether you're on a Retina or HiDPI display.
- Document Size & Scroll Offset: Full page dimensions and current horizontal/vertical scroll position.
- Browser Zoom Level: The current browser zoom percentage.
- Color Depth & Pixel Depth: Bits per pixel, indicating support for true color or deep color displays.
- Color Gamut: Detects whether the screen supports sRGB, P3 Wide, or Rec.2020 wide color gamut.
- Dark Mode: Detects whether the OS is currently using a dark color scheme.
- HDR Support: Checks whether the display supports High Dynamic Range.
- Screen Orientation: Shows whether the device is in Landscape or Portrait mode along with the rotation angle, updated in real time.
- Device Type Detection: Automatically identifies your device as a mobile phone, tablet, desktop, or large monitor.
Use Cases
- Front-End Development: Quickly verify viewport size, DPR, and zoom level to assist with responsive layout debugging and breakpoint testing.
- UI/UX Design: Gather real device screen data to inform design decisions and ensure accurate cross-device adaptation.
- Device Verification: Confirm that a new device's screen specs match its advertised specifications.
- Cross-Device Testing: Open the tool on different devices to compare screen parameters and assist with multi-platform compatibility work.
- Wide Gamut & HDR Detection: Check whether a device supports P3 Wide or HDR, useful for photographers, video editors, and content creators.
Live Data Updates
All parameters are calculated entirely in the browser with no server requests. When you resize the browser window, change the page zoom, or rotate your device, all values update instantly without requiring a page refresh.
Frequently Asked Questions
Q: What is the difference between screen resolution and viewport size?
Screen resolution refers to the fixed physical pixel count of the display hardware, while viewport size refers to the CSS pixel dimensions of the browser's visible area, which changes when you resize the window or adjust zoom. On high-DPR devices, the physical pixel count is much larger than the CSS pixel count.
Q: What does Device Pixel Ratio (DPR) mean?
DPR is the ratio of physical pixels to CSS pixels. A DPR of 2 means each CSS pixel is rendered by a 2×2 grid of physical pixels—commonly known as a "Retina" or HiDPI display. Text and images appear sharper and more detailed on such screens.
Q: Why is the detected zoom level not 100%?
The zoom level is estimated using outerWidth / innerWidth. If your operating system has a display scaling setting applied, or if the browser itself has a non-default zoom configured, the detected value may differ from 100%.
Q: What is the difference between P3 Wide and sRGB color gamuts?
sRGB is the standard color gamut used by most displays, covering about 33% of the visible color spectrum. P3 Wide (DCI-P3) covers approximately 25% more colors than sRGB and is commonly found on high-end displays from Apple, Samsung, and others, enabling more vibrant and saturated visuals.
Q: Is the dark mode detection accurate?
Yes. The tool uses the CSS media query prefers-color-scheme: dark to read the OS-level color scheme preference, which is consistent with what the browser reports. The detection is reliable and updates automatically when the system theme changes.
Loading...