Screen Ruler – Virtual Screen Measurement
Measure digital screen pixels and physical real-world dimensions simultaneously. Switch seamlessly between pixels (px), centimeters (cm), millimeters (mm), and inches (in).
Measuring Screen Pixels vs. Physical Millimeters
When building user interfaces, responsive websites, or digital graphics, designers frequently need to measure both CSS pixels for code layout and physical dimensions for ergonomics.
Digital CSS Pixels (PX)
The logical coordinate system of the web browser. Independent of viewing distance, used directly in CSS stylesheets, canvas drawing, and Figma prototypes.
Calibrated Physical Size (CM / IN)
The real physical dimension when held against your display glass. Requires card calibration to compensate for monitor size and device pixel ratio.
Curious about your screen's pixel density? Calculate it with our Display PPI Calculator.
Frequently Asked Questions About Screen Measurement
Technical explanations on screen calibration, pixel density, and real-world accuracy.
What is an online ruler?▼
An online ruler is an interactive digital measuring tool displayed directly in your web browser. When calibrated to your device's physical screen pixel density (PPI), it renders real-world 1:1 scale markings in centimeters, millimeters, inches, and pixels, allowing you to measure physical objects directly against your screen.
How accurate is an online ruler?▼
Unlike simple graphics that guess screen size, ANRuler relies on physical screen calibration. Once calibrated using a standard credit card (85.60 mm wide) or a known physical object, accuracy matches real-world drafting scales to within sub-millimeter tolerances on unscaled displays. Uncalibrated digital rulers, by comparison, often differ by 15% to 40% due to varying hardware pixel densities.
Why does an online ruler need calibration?▼
Web browsers and operating systems do not know the physical diagonal measurements of your monitor or smartphone screen. A 1080p resolution on a 5.8-inch smartphone screen packs over 400 pixels per inch, while the same resolution on a 27-inch desktop monitor has only ~81 pixels per inch. Calibration establishes the exact ratio of CSS pixels to physical millimeters for your individual screen.
How do I calibrate my screen with a credit or debit card?▼
All standard credit cards, bank cards, driver's licenses, and transit cards conform to the international ISO/IEC 7810 ID-1 standard: exactly 85.60 mm wide by 53.98 mm high. Click 'Calibrate', place your physical card flat on the on-screen outline, and adjust the slider until the outline matches your card's exact dimensions. Once saved, your scale is permanently stored locally in your browser.
Does browser zoom affect ruler accuracy?▼
Yes. If your browser zoom is set to 110%, 125%, or 90%, CSS pixels are scaled relative to your display, which changes physical dimensions. For best results, ensure your browser zoom is at 100% (press Ctrl+0 on Windows/Linux or Cmd+0 on macOS) and calibrate your screen.
Can I measure centimeters and millimeters on my phone?▼
Yes. ANRuler is responsive and touch-enabled for iPhone and Android smartphones. You can switch to CM or MM mode, align an object (such as a key, screw, coin, or piece of jewelry) along your phone screen edge, and use the draggable calipers to read the measurement.
Can I measure inches with fractional divisions (1/8″, 1/16″)?▼
Yes. In Inch mode, ANRuler provides true drafting subdivisions down to 1/16th of an inch, as well as decimal inch readouts (e.g. 3.375″ = 3 3/8″), making it easy to measure both imperial hardware and drafting plans.
Is my calibration saved when I return to the site?▼
Yes. ANRuler stores your calibrated pixel density locally in your browser's localStorage. You will not need to recalibrate on future visits unless you change monitors, switch browser zoom, or clear browser site data.