THE PRACTICAL GUIDE · NORMANDIN SYSTEMS
Get more from Device information
Device Information displays properties that the current browser exposes about its device and rendering environment. Screen dimensions, browser viewport, pixel ratio, and user-agent details help explain responsive-layout differences. These values describe what the browser reports, which may differ from physical hardware specifications because of scaling, zoom, privacy settings, or emulation. Inspection tools turn technical information into a form you can examine and compare. Their reports describe the input or the environment they can observe, so missing fields and implementation limits matter as much as populated values. Start with an example whose basic properties you already know, then investigate unfamiliar values one at a time. Save relevant observations alongside the context in which you collected them. A report is evidence for troubleshooting, rather than an automatic explanation of every underlying problem.
Guide updated October 13, 2026
How to use this tool
- Provide the relevant sample or open the workspace in the environment you want to inspect. Note the source and context of the information.
- Open the workspace on the device being investigated and compare the displayed dimensions and browser information.
- Review the example below and compare its expected behavior with a small sample of your own input before continuing.
- Compare the important fields against your expectations and investigate discrepancies using a second relevant source of evidence before drawing conclusions.
SEE IT IN PRACTICE
A worked example
A browser with devicePixelRatio 2
A reported ratio of 2 device pixels per CSS pixel
Pixel ratio helps explain why a CSS-sized image may need more source pixels for a sharp display on a high-density screen.
CSS pixels differ from physical pixels
A browser viewport measured in CSS pixels is a layout coordinate system, not a direct inventory of physical display pixels. Device pixel ratio, operating-system scaling, and browser zoom influence how CSS dimensions map to the screen. That explains why a screenshot or image can need more raster pixels than its CSS width to appear sharp. Record the viewport and zoom context when reporting a layout issue rather than supplying only the monitor's marketed resolution.
Reported information has privacy and emulation limits
Browsers can reduce or alter exposed information, and developer-tool emulation can change selected values without turning a desktop into the emulated physical device. A user-agent string may also be modified. Use the report to document an observed environment and compare relevant properties, not to make strong identity claims about the hardware. For a responsive bug, test the behavior itself at the reported dimensions. A matching set of labels is less useful than a reproducible viewport and interaction sequence.
When this tool is useful
- Document a responsive design bug
- Compare desktop and mobile rendering environments
- Check pixel-density assumptions for image assets
Tips for a better result
- Record zoom level and viewport size when comparing results, especially if a responsive-layout issue appears only at certain window widths.
- A missing field can mean the information was absent, unsupported, or deliberately withheld. Do not silently treat an unknown value as a negative result or as zero.
- Keep the source and the settings used for this result together. That makes a later comparison or correction easier, especially when another person needs to reproduce the same outcome.
Frequently asked questions
Is browser-reported information a hardware inventory?
Browser-reported device details are not a complete hardware inventory. User-agent values can be reduced or altered, and available fields differ between browsers.
Does a report prove that everything is correct?
No. A report exposes particular properties that the tool can inspect. Interpret each field in context, consider what was not checked, and use the result together with the original file or system evidence.
How can I make comparisons more reliable?
Compare like with like: use the same input version and note browser, device, or file differences that may affect the report. Change one variable at a time so you can identify which change explains a different result.
What happens to the information I enter?
The utility processes your input in this browser. Some tools retain field values in browser storage or the URL; avoid entering secrets in shareable fields. Page and asset requests still go to the hosting provider. Read the privacy and offline-use notes for details.