| Metric | Value |
|---|---|
| Screen width (px) | {{ screenWidth }} |
| Screen height (px) | {{ screenHeight }} |
| Viewport width (px) | {{ viewportWidth }} |
| Viewport height (px) | {{ viewportHeight }} |
| Device-pixel ratio | {{ devicePixelRatio }} |
| Color depth (bits) | {{ colorDepth }} |
| Orientation | {{ orientation }} |
| Aspect ratio | {{ aspectRatio }} |
Screen resolution expresses the count of physical pixels shown horizontally and vertically on a display. Combined with device-pixel ratio and color depth, it governs how sharply graphics render, how much information fits on one page, and whether responsive breakpoints trigger earlier or later than expected across monitors, phones, projectors and wearables.
The utility requests live measurements from your browser’s display and viewport objects, then synthesises them into eight metrics—screen and viewport dimensions, device-pixel ratio, color depth, orientation and aspect ratio. Behind the scenes, a lightweight reactive engine recalculates values instantly whenever you resize a window or rotate a handset, ensuring continuously accurate figures.
Designers often juggle multiple monitors, high-density laptops and mobile emulators. Use the report to confirm media queries before shipping, demo pixel-perfect prototypes during client calls, or diagnose blurry icons on a colleague’s screen. Values update with every resize or rotation, so capture new readings after changing window size, zoom level or display scaling.
Display metrics originate from two browser interfaces: the screen interface, which reports physical pixel dimensions and color depth, and the viewport interface, which describes the logical content area excluding toolbars. Layout engines multiply viewport dimensions by the device-pixel ratio to translate CSS pixels into hardware dots. Accurate readings let you predict breakpoint activation, choose image source sets, balance performance budgets, and guide accessibility scaling on retina-class displays. They underpin fluid grids and pixel-perfect iconography.
x : 1| Metric | Meaning |
|---|---|
| Screen width / height | Physical pixel grid of the panel |
| Viewport width / height | Logical CSS pixels available to content |
| Device-pixel ratio | Hardware-to-CSS pixel multiplier |
| Color depth | Bits allocated per pixel |
| Orientation | Landscape when width ≥ height, else Portrait |
| Aspect ratio | Width-to-height proportion, rounded to two decimals |
Example (2560 × 1440 screen):
Formatted output: 1.78 : 1 (Landscape)
Concepts align with the W3C CSS Device Adaptation Module, the HTML Screen Interface specification, and peer-reviewed studies on high-density display rendering.
Privacy & Compliance — the metrics are calculated locally and never leave your browser.
Follow these steps to capture accurate display information.
No. All calculations occur in your browser; nothing is transmitted or persisted.
The viewport excludes interface chrome and accounts for zoom, whereas screen values describe physical pixels.
Zoom changes viewport dimensions and can raise the effective device-pixel ratio, so recapture metrics after adjusting zoom.
The ratio of hardware pixels to CSS pixels; higher numbers indicate denser displays often marketed as “retina”.
Most modern panels report 24-bit depth; some laptops lower the figure in power-saving modes.