CSS viewport
window.innerWidth and window.innerHeight report the layout viewport in CSS pixels, including the vertical scrollbar when present. Responsive layouts use these browser coordinates rather than assuming physical display pixels.
CSS viewport
— × —window.innerWidth × window.innerHeightBrowser-exposed screen
— × —screen.width × screen.height in CSS pixels- Device pixel ratio
- —
- Orientation
- — Browser-reported orientation
- Derived viewport backing size
- — × — CSS viewport × DPR, rounded; not a panel-resolution claim
- Fullscreen viewport
- Not active Updates only while this tool is fullscreen
window.devicePixelRatioOptional PPI calculator
Enter the panel’s actual pixel dimensions and physical diagonal.
Read browser values without mislabeling them
Screen Resolution Test
This screen resolution test reports the current CSS viewport, the dimensions exposed through the browser Screen API, device pixel ratio, orientation, and a clearly labeled viewport × DPR derivation. Values update during resize and fullscreen changes. They describe the browser’s current coordinate systems; they are not guaranteed to be the display panel’s native physical resolution.
Four labels, four meanings
How to read the screen resolution test
Browser-exposed screen
screen.width and screen.height are shown exactly as JavaScript exposes them. The values are generally CSS-pixel dimensions of the screen available to the browser environment, not a promise about the native pixel matrix.
Device pixel ratio
window.devicePixelRatio expresses the ratio between device pixels and CSS pixels for the current browser context. Page zoom, OS scaling, moving a window between displays, and browser behavior can change the reported ratio.
Derived backing dimensions
The page multiplies CSS viewport width and height by DPR, then rounds each result. This can be useful when sizing a canvas backing store, but it is not the same claim as a monitor’s native resolution and may differ from a captured or presented frame.
Live comparisons
Why the dimensions may change
| Change | Likely browser effect | What it does not prove |
|---|---|---|
| Resize the window | The CSS viewport changes immediately; the Screen API value usually remains tied to the screen. | Nothing about panel pixels was added or removed. |
| Enter fullscreen | Browser chrome leaves the viewport, so the fullscreen CSS dimensions can increase. | Fullscreen does not reveal an otherwise hidden native resolution. |
| Change browser zoom | CSS-pixel mapping and DPR reporting may change, depending on browser and platform. | A changed result does not mean hardware density changed. |
| Move between monitors | Screen values, DPR, and orientation can update as the browser crosses displays. | The page cannot identify which model or connection is active. |
User-supplied physical context
What the optional PPI calculator does
Pixels per inch requires information a normal webpage does not reliably know. Enter the panel’s horizontal pixel count, vertical pixel count, and physical diagonal in inches. The calculator uses sqrt(width_px² + height_px²) / diagonal_inches and performs the arithmetic entirely in this page.
Accuracy depends on entering the actual panel pixel matrix and the correct viewable diagonal. Do not automatically copy the browser Screen API dimensions into the calculator: those may be logical values after scaling. A manufacturer specification or operating system display panel may provide more appropriate inputs, but verify what each label means.