| 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 total number of physical pixels displayed across the width and height of your monitor. Together with colour depth and device-pixel ratio, these dimensions govern how sharply graphics and text render, shaping everything from typography crispness to high-density image delivery in modern responsive interfaces used across desktops, tablets and phones.
This utility reads the browser’s window and screen objects in real time, then displays full screen size, viewport size, pixel density, colour depth, aspect ratio and orientation in a single card. A reactive engine keeps the figures current while you resize or rotate, and one-click actions let you copy or download the metrics as a CSV snapshot.
Use it to confirm CSS breakpoints, debug retina artefacts, compare multiple monitors, validate game canvas settings, or attach reproducible display specifications when reporting layout issues to engineering. Measurements reflect browser zoom, operating-system scaling and virtual-display drivers; return each to its default to ensure device-level accuracy before capturing a definitive reading.
A browser exposes two complementary coordinate spaces. Screen dimensions describe the hardware pixel matrix reported by the operating system, while viewport dimensions reflect the layout viewport where CSS pixels are rendered. The ratio between them, known as the device-pixel ratio, indicates how many physical pixels map to one CSS pixel and allows high-density screens to render crisp assets without breaking layout logic. Orientation is inferred from the larger viewport axis, enabling consistent breakpoint targeting across devices.
The application queries these properties on load and after every resize event, applying a short debounce to avoid layout-thrashing. Because all calculations are algebraic and deterministic, updates complete in constant time and never block the main thread.
| Symbol | Meaning | Unit | Typical Range | Sensitivity |
|---|---|---|---|---|
W | Screen width | px | 320 – 7680 | Linear |
H | Screen height | px | 320 – 4320 | Linear |
VW | Viewport width | px | 200 – 7680 | High |
VH | Viewport height | px | 200 – 4320 | High |
DPR | Device-pixel ratio | ratio | 1 – 8 | Quadratic |
CD | Colour depth | bits | 24 – 48 | Low |
AR | Aspect ratio | ratio | 1 – 4 | Low |
VW ≥ VHVW < VHGiven W=1920 and H=1080, the aspect ratio is
rounded to 1.78 : 1 (marketed as 16:9). The effective CSS viewport becomes 960 × 540 px because DPR=2 doubles pixel density on each axis.
devicePixelRatio default to 1, potentially under-reporting density.The metric refresh executes a constant-time property read (O(1)) and string concatenation. A 40 ms debounce prevents high-frequency resize events from flooding the reactive engine, ensuring smooth interactions even on low-power devices. All computation remains client-side with zero network requests, maintaining privacy and eliminating latency concerns.
Follow these steps to capture display metrics confidently.
All calculations occur in your browser memory; nothing is sent to servers or third parties.
Screen width refers to the full hardware pixel span, whereas viewport width measures the CSS layout area inside the browser window after zoom and scroll-bar deductions.
The utility listens for resize events and recalculates values on the fly, allowing you to witness breakpoint transitions without refreshing.
Yes — zoom increases or decreases CSS pixels, altering viewport dimensions and device-pixel ratio while leaving physical screen size unchanged.
You can drag the window onto each monitor to capture its metrics; readings always pertain to the display hosting the current browser window.