This screen information detector is intuitive and easy to use. Open the page and all data is automatically detected and displayed in real time β no manual input required. Here is a detailed guide to each module:
Display Info: Shows your monitor's physical resolution, available workspace resolution, screen orientation (landscape/portrait), color depth (typically 24 or 32 bits), refresh rate (requires browser support for the Screen API), device pixel ratio (DPR β Retina screens are typically 2 or 3), and HDR support status. These metrics are essential for designers choosing canvas sizes and developers optimizing image assets.
Viewport Info: Displays the dimensions of the browser area currently available for rendering web content, including viewport width/height, document total width/height, scrollbar width, and device-independent pixel (CSS pixel) count. Viewport size is the core reference metric for responsive design. Resize your browser window to observe real-time viewport changes.
Browser & Device Info: Automatically identifies the browser name and version, rendering engine, operating system platform, number of logical CPU cores, device memory capacity, touch screen support, network connection type (WiFi/4G/5G/wired), and battery status. Click the "Refresh Detection Data" button at the top to manually re-collect all information.
The screen info detector has a wide range of applications in web development and UI design:
Responsive Debugging: Front-end developers need accurate viewport dimensions to verify whether CSS media queries are triggered correctly. This tool shows live viewport width and height, allowing you to validate breakpoint designs (e.g., 768px, 1024px, 1440px) by simply resizing the browser window.
Retina Image Optimization: Using the device pixel ratio (DPR) value, developers can determine whether 2x or 3x high-resolution images are needed. A Retina screen with DPR=2 will look blurry with 1x images. Using srcset to serve the correct resolution dramatically improves visual quality.
Device Compatibility Testing: QA testers can open this tool on different devices (phones, tablets, laptops, desktops) to quickly capture parameter differences and build a test matrix. For example, compare how an iPhone with DPR=3 renders images differently from an Android phone with DPR=2.75.
Understanding Device Pixel Ratio (DPR): DPR = physical pixels / CSS pixels. On standard desktop displays, DPR is typically 1, meaning one CSS pixel maps to one physical pixel. On Retina/HiDPI screens, Apple sets DPR to 2 (iPhone, MacBook Pro), and some Android phones reach 2.75 or even 3. This means a width: 300px element on a DPR=2 screen actually occupies 600 physical pixels, so a 600px-wide image is required to maintain clarity.
The Three Viewports: In mobile web development, there are three important viewport concepts: the Layout Viewport (defaults to ~980px wide), the Visual Viewport (what the user actually sees), and the Ideal Viewport (equal to the device width). Using <meta name="viewport" content="width=device-width, initial-scale=1"> sets the layout viewport to the ideal viewport, enabling true responsive adaptation.
Advanced Media Queries: Beyond the common min-width and max-width, CSS media queries can detect user preferences: prefers-color-scheme: dark for system dark mode, prefers-reduced-motion: reduce for users who prefer less animation, and hover: hover for devices that support hovering. This tool shows the current state of these media queries so developers can test their preference-based adaptations.
No. This tool runs entirely in your browser. All data is read and displayed locally on your device. Nothing is uploaded to any server. Your privacy is fully protected.
Screen resolution refers to the physical pixel count of your display hardware (e.g., 1920x1080). Viewport size is the area inside the browser window available for rendering web content. The viewport is usually smaller than the screen resolution when the browser is not maximized or when scrollbars are present.
Device Pixel Ratio (DPR) is the ratio between physical pixels and CSS logical pixels. For example, DPR=2 means one CSS pixel maps to a 2x2 block of physical pixels. This is why Retina/HiDPI screens look sharper β they pack more physical pixels into the same logical space.
Screen refresh rate requires the newer Screen API, which may not be supported in some browsers (e.g., Firefox, Safari) or may be restricted by the operating system or display drivers. The tool will show the value whenever the browser provides it.
Yes. Mobile devices typically have different screen resolutions, higher DPR values (2 or above), and support multi-touch. Desktop devices usually have DPR=1 and no touch support. This tool accurately detects and displays these differences.
Developers can use this tool to quickly capture target device parameters and set appropriate CSS media query breakpoints, choose the right image resolution (e.g., serve 2x or 3x images based on DPR), and optimize layout strategies for better responsive experiences.