Screen Ruler & Dimension Tool
/tool/Physical Scale Calibration · Centimeters · Inches · Viewport DPR Inspector
Calibrate Physical Scale
Hold a standard credit card or driver license against your screen and adjust the slider until the outline matches its real physical edge.
📐Display & Viewport Hardware Metrics
How Does an Online Screen Ruler Achieve Physical Real-World Accuracy?
Rendering a real-world physical measurement tool (like an actual ruler in centimeters or inches) on a computer monitor or mobile screen is fundamentally constrained by variable hardware pixel densities. Because web browsers define CSS pixels (px) as an abstract unit rather than a physical distance, a standard 96 DPI assumption will be visibly inaccurate on modern high-DPI displays (such as 4K desktop monitors, Apple Retina displays, or high-density OLED smartphones).
To achieve 100% true-to-scale physical precision, an online screen ruler requires dimensional calibration. The most reliable universal physical reference is the standard ISO/IEC 7810 ID-1 format—the universal dimension used by credit cards, debit cards, driving licenses, and gym passes across the world (exactly 85.60 mm × 53.98 mm or 3.370 in × 2.125 in). By adjusting the calibration slider until the on-screen card guide matches your physical plastic card, LocalDevTools calculates your display's exact real-world Pixels Per Inch (PPI).
Beyond measuring physical items held against the glass, web designers and developers need to audit CSS Viewport dimensions, monitor resolution, device color depth, and Device Pixel Ratio (DPR) for responsive testing. LocalDevTools computes all physical scalings and hardware viewport metrics 100% inside your local browser memory, providing a dependable, zero-tracking measurement suite.
How to Calibrate and Use This Screen Ruler
- Select your unit of measurement: Choose between Centimeters (cm), Millimeters (mm), Inches (in) with 1/16th fractional markings, or CSS Pixels (px).
- Calibrate with a physical card: Click Calibrate with Card. Hold any standard plastic bank card or driver's license against the screen, then drag the slider or use
-/+buttons until the digital outline matches your card's exact physical width. - Measure physical objects: Hold stationery, hardware screws, coins, or envelopes against the on-screen ruler markings to read physical dimensions instantly.
- Audit display metrics: Review the bottom hardware audit panel to inspect your active browser viewport width/height, screen orientation, color depth, and Retina Device Pixel Ratio (DPR).
Frequently Asked Questions (FAQ)
Why is calibration necessary before measuring real-world objects? ↓
Web browsers cannot detect the diagonal physical screen size of your external monitor or the exact physical spacing of liquid crystal pixels. Calibrating against a standard ISO credit card calculates the true pixels-per-millimeter ratio of your specific screen.
Will browser zoom (Ctrl + / Ctrl -) affect ruler accuracy? ↓
Yes. Changing your browser's zoom level alters the scaling factor of CSS pixels. For guaranteed physical accuracy, ensure your browser zoom is set to 100% (press Ctrl + 0 or Cmd + 0) before performing card calibration.
What is Device Pixel Ratio (DPR)? ↓
Device Pixel Ratio (DPR) is the ratio between physical display pixels and CSS logical pixels (window.devicePixelRatio). Standard displays have a DPR of 1.0, while Apple Retina screens, 4K monitors, and modern smartphones have DPRs of 2.0 or 3.0 to render ultra-sharp text and graphics.
Are any calibration or screen measurements sent to a server? ↓
No. LocalDevTools saves your calibrated PPI setting directly in your browser's local storage. No screen dimensions, hardware specifications, or calibration adjustments are ever transmitted over the network.