Screen Ruler
Start the ruler overlay, click two points on the visible page, and read their horizontal, vertical, and straight-line distances.
Browser screen ruler
- Viewport
- —
- Screen reported by browser
- —
- Device pixel ratio
- —
CSS pixels are not physical millimeters. Browser zoom and display scaling affect their size.
Click two points in the visible viewport.
A QUICK WALKTHROUGH
How to use this tool
- Review the viewport, browser-reported screen size, and device pixel ratio.
- Start measuring and click two points in the viewport.
- Read the distance in CSS pixels; press Escape or select Exit to close the overlay.
Viewport coordinates in CSS pixels
The overlay reads pointer positions in CSS pixels and computes horizontal, vertical, and Euclidean distances. Browser zoom, page layout, and device pixel ratio affect how CSS pixels map to device pixels.
Screen information is browser-reported
Screen dimensions, viewport dimensions, and devicePixelRatio are values exposed by the browser. They do not reveal calibrated physical DPI or guarantee a real-world ruler length.
Temporary local measurement
The overlay runs in this page and does not upload or save coordinates. Measurements are cleared when you reset or leave the page.
GOOD TO KNOW
Common questions
Are these physical millimeters?
No. The ruler measures CSS pixels in the viewport. Physical dimensions require calibration against a known-size object and can change with display scaling or browser zoom.
What does device pixel ratio mean?
It is the browser-reported ratio between device pixels and CSS pixels. It is not a complete measurement of physical screen density.
Can I measure anywhere in the browser window?
The overlay covers the visible viewport. Its small control panel remains interactive; clicks there operate the controls instead of setting measurement points.