Why Browser Zoom Breaks an Actual-Size Ruler

What "actual size" depends on

An actual-size ruler works by knowing how many CSS pixels span one millimeter on your screen. That number comes from calibration, whether you entered your display's diagonal or matched an ISO/IEC 7810 ID-1 card (85.60 mm long) against the edge. The screen ruler stores that figure and draws every tick from it.

The figure is only valid while a CSS pixel keeps covering the same amount of glass. Browser zoom changes exactly that, which is why a ruler that was correct a minute ago can be wrong after a single keystroke.

What zoom actually does

Page zoom does not enlarge a picture of the page. It changes the size of the CSS pixel itself. At 100% zoom on a display with a device pixel ratio (DPR) of 1, one CSS pixel is one device pixel. At 125% zoom, the browser makes each CSS pixel cover 1.25 device pixels along each axis, re-runs layout in a viewport that is now narrower in CSS pixels, and reports a DPR of 1.25.

Everything specified in CSS pixels grows by the same factor: text, images, and the ruler's tick marks. The ruler still draws the number of CSS pixels it stored for one millimeter, but each of those pixels now covers 25% more glass.

The 125% example

Suppose calibration found 3.78 CSS pixels per millimeter, so a 10 cm span is 378 CSS pixels. The table shows what those 378 pixels measure on the glass at different zoom levels:

The error is exactly the zoom factor. A ruler calibrated at 100% and viewed at 125% is 25% too large along every axis; at 80% it is 20% too small. The centimeter, millimeter, and inch rulers share one calibration, so all are affected identically.

Ctrl + 0 on Windows and Linux, or Cmd + 0 on macOS, returns the page to 100%.

How zoom can be detected

A page cannot ask the browser "what is the zoom level?" directly, but it can observe the side effects.

Compare the DPR to the calibrated value. Desktop browsers fold page zoom into window.devicePixelRatio. If the ruler stored a DPR of 2 at calibration time and now reads 2.5, the page is at 125% zoom, and the ruler's drawn length is 2.5 / 2 = 1.25 times what it should be. This is the check the site's ruler performs, and it is why a warning appears when the current DPR differs from the stored one.

Watch visualViewport.scale for pinch zoom. On phones and tablets, pinch zoom is a different mechanism. It magnifies the rendered page without re-running layout and, in most mobile browsers, without changing devicePixelRatio. Instead, window.visualViewport.scale rises above 1. A ruler that is pinch-zoomed to a scale of 2 appears twice as large while every reported pixel value looks normal, so this property has to be checked separately.

OS scaling vs browser zoom

Both change the DPR, but they behave differently for calibration:

OS scaling is constant for a given setting, so a calibration performed at Windows 150% stays correct until you change that setting. Browser zoom is the more common cause of trouble because it is easy to change by accident: a stray Ctrl + scroll, a trackpad pinch, or a per-site zoom level remembered from an earlier visit is enough.

Checklist to restore accuracy

1. Reset page zoom. Press Ctrl + 0 (Windows, Linux) or Cmd + 0 (macOS). Most desktop browsers remember zoom per site, so this only affects the ruler's site, not the rest of your browsing.
2. Exit pinch zoom on mobile. Pinch inward until the page stops shrinking, or double-tap an empty area. The page should fit the screen width with no horizontal panning.
3. Confirm the warning has cleared. If the ruler still reports a DPR mismatch at 100% zoom, the change came from OS scaling or a different display, and you should recalibrate rather than keep resetting zoom.
4. Verify with a card. Hold an ID-1 card against the centimeter ruler and check that its long edge reaches 8.56 cm, or against the inch ruler and check for 3.370 in. The short edge should read 5.398 cm or 2.125 in.
5. Recalibrate if the card does not match. A visible gap at 8.56 cm means the stored pixels per millimeter is wrong for the current setup. Recalibrating takes a few seconds and replaces the stored DPR too.

Why the ruler does not simply auto-correct

It might seem easier for the ruler to divide by the DPR change and redraw itself. It warns instead because the DPR alone cannot say why it changed. A DPR that moved from 2 to 2.5 could be 125% zoom on the same screen, where dividing would be right, or a move to a different monitor, where dividing would be wrong. Only a physical check settles it, which is why the methodology treats the card comparison as the final word and the DPR check as an early warning. The accuracy page covers the other conditions that can make a calibrated ruler disagree with a physical object.