Free Screen Pixel Ruler With Drag Measurement and Physical Calibration
Drag across the measurement board to measure CSS pixels, device pixels, diagonal distance, and calibrated millimeters or inches after matching a reference card.
Screen Pixel Ruler With Drag Measurement and Physical Calibration
Physical calibration
Place a standard ID-1 card against the screen and adjust the reference until its displayed width matches the card’s 85.60 mm physical width.
Measurement
Built for a complete diagnostic workflow
Drag-to-measure rectangle
Screen Pixel Ruler workflow feature designed for practical browser use.
Live width and height in CSS pixels
Screen Pixel Ruler workflow feature designed for practical browser use.
Device-pixel conversion with DPR
Screen Pixel Ruler workflow feature designed for practical browser use.
Diagonal-distance calculation
Screen Pixel Ruler workflow feature designed for practical browser use.
Credit-card width calibration
Screen Pixel Ruler workflow feature designed for practical browser use.
Adjustable calibration slider
Screen Pixel Ruler workflow feature designed for practical browser use.
Pixels-per-millimeter estimate
Screen Pixel Ruler workflow feature designed for practical browser use.
Estimated pixels per inch
Screen Pixel Ruler workflow feature designed for practical browser use.
Millimeter and inch output
Screen Pixel Ruler workflow feature designed for practical browser use.
Crosshair measurement board
Screen Pixel Ruler workflow feature designed for practical browser use.
Copyable measurement summary
Screen Pixel Ruler workflow feature designed for practical browser use.
Local calibration saving
Screen Pixel Ruler workflow feature designed for practical browser use.
How to interpret this screen pixel ruler
A screen pixel ruler measures distances in CSS pixels first. CSS pixels are the coordinate system used by page layout and do not necessarily equal one physical display pixel, especially on high-density screens where devicePixelRatio is greater than one.
For physical estimates, calibrate the page against an object with a known real-world dimension. The reference control uses the 85.60 mm width of the ISO/IEC 7810 ID-1 card format commonly used for payment and identification cards. Adjust the on-screen reference until it matches the physical card width.
After calibration, the tool converts CSS-pixel measurements to millimeters and inches using the measured pixels-per-millimeter ratio. Browser zoom, operating-system scaling, display scaling, and viewing setup can change that ratio, so recalibrate whenever those settings change.
Use the drag board for interface measurements, screenshot inspection, approximate object sizing, and layout checks. For engineering or manufacturing work, use a calibrated physical measuring instrument instead.
What the browser can and cannot tell you
| Signal | What it represents | How to use it |
|---|---|---|
| CSS pixel | Browser layout coordinate | Primary measurement unit on the page |
| Device pixel | CSS pixels × devicePixelRatio | Approximate backing-pixel count |
| Calibration | Known width / matched CSS pixels | Required for physical-size estimates |
| px/mm | Matched CSS pixels ÷ 85.60 mm | Changes with zoom and scaling |
| Estimated PPI | px/mm × 25.4 | Browser-calibrated estimate, not panel specification |
Build a better troubleshooting habit
Start with a baseline
Run the primary diagnostic before changing settings so you have a comparison point.
Repeat the test
One sample can be misleading. Repeat the check and compare the pattern, not only the best number.
Change one variable
When troubleshooting, change one device, browser, permission, cable, or setting at a time.
Separate browser from hardware
A browser result reflects only the parts of the input or output path that the page can observe.
Document the environment
Keep browser, operating system, device connection, scaling, or permission context with the result.
Use the next diagnostic
Open a related ready page when the result suggests a neighboring part of the device or browser stack.
Three quick questions
Finish with a quality review
Recent saved milestones on this device
Continue without a dead end
Free Screen Pixel Ruler With Drag Measurement and Physical Calibration: FAQ
Why do CSS pixels differ from physical pixels?+
Browsers use CSS pixels as a layout abstraction. High-density displays can map one CSS pixel to multiple device pixels.
How does the credit-card calibration work?+
Adjust the reference width until it physically matches an 85.60 mm ID-1 card, then the page derives CSS pixels per millimeter.
Does browser zoom affect the ruler?+
Yes. Zoom and operating-system scaling can change the relationship between CSS pixels and physical size, so recalibrate after changes.
Can it measure an object in a photo?+
It can measure the photo’s on-screen CSS-pixel dimensions, but real-world object size requires a scale reference within the image or another calibration method.
Is the PPI value the monitor’s official specification?+
No. It is an estimate derived from browser calibration and may differ from the panel’s manufacturer specification.
Use the result responsibly
This tool reports what a browser can observe or calculate in the current environment. Device firmware, drivers, operating-system processing, permissions, transport, display refresh, acoustic conditions, and browser implementation can add behavior that this page cannot isolate.
External technical reference: MDN: CSS pixel ↗.