Screen, viewport and physical pixels
Browsers report sizes in CSS pixels. Screen resolution is window.screen.width × height; the available screen leaves out the taskbar or dock. The viewport is the part of the window that shows the page (window.innerWidth × innerHeight), and the outer size includes the browser's own toolbars.
The device pixel ratio (DPR) is how many physical screen pixels make up one CSS pixel. Physical pixels = CSS pixels × DPR. A laptop reporting 1440 × 900 at DPR 2 has a 2880 × 1800 panel.
| Value | Browser API |
|---|---|
| Screen resolution | screen.width × screen.height |
| Available screen | screen.availWidth × availHeight |
| Viewport | window.innerWidth × innerHeight |
| Window | window.outerWidth × outerHeight |
| Device pixel ratio | window.devicePixelRatio |
Why the numbers change
Operating-system display scaling and browser zoom both change the device pixel ratio, and with it the CSS sizes. Zoom to 200% and the viewport reports half as many CSS pixels. Rotating a phone swaps width and height, and moving the window to another monitor can change everything.
Some privacy-focused browsers round or standardise these values to make fingerprinting harder, so a reading can differ slightly from the panel's specification.
Privacy
Every value on this page is read by your browser and shown only to you. Nothing is sent to Calxy or any other server, stored, or added to share links.