How Pixel Density (PPI) Affects On-Screen Ruler Accuracy

Two people open the same online ruler and place a credit card against the screen. One sees the on-screen rectangle match the card almost perfectly. The other sees it appear half the size of the card, even though the tool claims it is drawing 85.6 mm. The tool is not broken. It is making one assumption that is true on the first screen and wrong on the second: pixels per inch.

This guide is the technical version of "why is my ruler wrong" and the practical version of "how do I tell whether a ruler can be trusted before I rely on it." If you only need a working ruler, open Screen Ruler, pick a credit card, and run the 10-second calibration. If you want to understand what is actually happening, read on.

What pixel density is

Pixel density is the number of physical pixels packed into one linear inch of screen. It is measured in pixels per inch (PPI) or sometimes dots per inch (DPI) — for our purposes the terms are interchangeable. A 1920 × 1080 panel that measures 24 inches diagonal has about 92 PPI. A 2560 × 1440 panel of the same physical size has about 122 PPI. A 6.1-inch iPhone 14 has 460 PPI. The same number of pixels takes up very different physical sizes on each.

Pixel density is fixed at manufacture and does not change. Your laptop screen has the same PPI today that it had the day you bought it, and will have the same PPI for the rest of its life. The browser cannot change it; the operating system can scale how things appear (zoom levels, font sizes) but the underlying panel still has the same physical pixels in the same places.

Why a ruler cares

A ruler is a tool that converts pixel distances into physical distances. If you draw a line of 100 pixels, the length of that line in millimeters depends entirely on the PPI of the screen displaying it. On a 92 PPI desktop monitor, 100 pixels is about 27.6 mm. On a 460 PPI iPhone 14, 100 pixels is about 5.5 mm. The same pixel line is more than 5× longer on the desktop monitor than on the phone, even though the underlying code drew exactly 100 pixels in both cases.

This is the root of every "my online ruler is wrong" complaint. A ruler that draws "1 centimeter" without knowing the PPI of your specific screen is guessing. The guess may happen to be right on whatever screen the developer tested with, but it will be wrong on most other screens unless the tool either (a) detects the device and looks up the PPI from a table, or (b) asks you to calibrate with a reference object so the tool can measure the PPI empirically.

The devicePixelRatio trap

Modern Retina, HiDPI, and high-DPI displays add an extra wrinkle: they report a logical pixel grid that does not match the physical one. The 2024 MacBook Pro 14" has a physical panel of 3024 × 1964 pixels, but the browser reports the window as if it were 1512 × 982. The browser does this so that text and images do not appear absurdly small on a high-resolution screen — a paragraph of 16-pixel text would be about 2 mm tall on the raw 3024-pixel grid, illegible to a human eye.

To bridge the gap, the browser exposes a window.devicePixelRatio value. On the MacBook Pro this is 2 — meaning every CSS pixel is rendered as 2 × 2 = 4 physical pixels. On an iPhone 14 Pro Max it can be 3 — every CSS pixel is rendered as 3 × 3 = 9 physical pixels. On a 1080p desktop monitor it is usually 1 — CSS pixels and physical pixels match one-to-one.

A ruler that ignores devicePixelRatio will draw "1 centimeter" using CSS pixels and assume each CSS pixel is the same physical size on every screen. It is not. On the MacBook Pro, the ruler will appear half the intended size because the CSS pixel is physically half a millimeter wide instead of one. On the iPhone 14 Pro Max, the ruler will appear one-third the intended size. Calibration corrects this automatically because it measures the actual pixel-to-millimeter ratio of the CSS coordinate system — but a tool that hardcodes 96 PPI as a starting point and forgets devicePixelRatio will silently double or triple its error on Retina hardware.

How accurate auto-detection can be

Auto-detection looks at the user-agent string, identifies the device model, and looks up the PPI from a precompiled database. For Apple devices this works extremely well — the iPhone 14 Pro Max always has a 6.7-inch screen at 460 PPI, no variation, because Apple manufactures every unit identically. A ruler that recognizes an iPhone 14 Pro Max from the user agent and applies 460 PPI will be correct to within 1% on every iPhone 14 Pro Max in the world without any calibration step.

For Android and Windows devices, auto-detection is less reliable. Samsung sells 30+ Galaxy variants per year, each with slightly different panels; Windows laptops come from dozens of manufacturers with hundreds of panel suppliers. A user-agent string for "Samsung Galaxy S22" does not uniquely identify the panel, because there are regional variants with different displays. The same is true for "Lenovo ThinkPad" or "Dell XPS" — the model name is not enough.

This is why even a well-built auto-detection database can only get the answer right about 60% of the time on Android and Windows. The remaining 40% needs a calibration step to be accurate. Screen Ruler combines both: auto-detection picks a sensible default, and the calibration step (with a credit card or coin) lets the user override it for full accuracy when the default is wrong.

How to test your ruler in 30 seconds

You can sanity-check any online ruler with a credit card:

1. Pull out any standard credit card or debit card. ISO/IEC 7810 ID-1 defines the size as 85.6 mm × 54.0 mm — every Visa, Mastercard, and most local cards in the world conform to this. Bank cards are precise to within 0.05 mm.
2. Open the online ruler and switch to millimeters.
3. Hold the card flat against the screen so its long edge aligns with the ruler's zero mark.
4. Read where the other long edge falls.
5. If it lands between 85 and 86 mm, the tool is calibrated correctly. If it lands at 42, the tool ignored devicePixelRatio and is off by a factor of 2. If it lands at 250+, the tool is in some kind of imperial-units confusion or it is a 96 PPI assumption on a high-density phone screen. Either way, do not trust that ruler.

Repeat the test once per screen you intend to measure on. The result is per-screen, not per-tool — the same tool can be accurate on your laptop and wildly wrong on your phone if it is making different assumptions in each context.

Why screen rotation matters

Phones and tablets rotate. Most online rulers assume landscape orientation; some assume portrait. When you rotate the device, the physical pixel dimensions stay the same but the way the browser maps them to CSS coordinates can change. A tool that calibrated correctly in landscape can be off in portrait, because the longer dimension is now what the browser is reporting.

A good online ruler stores the calibration as a pure pixels-per-millimeter ratio that is orientation-independent. Rotating the device should not change the accuracy. Test this if you intend to use a ruler in both orientations — hold the credit card against the screen first in landscape, then rotate to portrait and re-check.

Why screen scaling matters

Operating systems let you change the system zoom level — "Display scaling" on Windows, "Resolution" or "Display" preference on macOS, "Display size" on Android. These settings change the devicePixelRatio reported by the browser. A ruler calibrated at 150% scaling will be wrong at 100% scaling on the same hardware, because the CSS pixel size changed.

The fix is to recalibrate any time you change system scaling, the same way you would recalibrate after switching devices. Screen Ruler stores the calibration with a timestamp and a device fingerprint and will prompt you to recalibrate if the fingerprint changes — moving between scaling settings counts as a fingerprint change.

Common questions

Does pinch-zoom in the browser affect accuracy?

Yes. Pinch-zoom changes the visual size of everything including the ruler, but does not change the underlying pixel grid. A ruler at 200% pinch-zoom shows a centimeter that is visually twice as long but the on-screen line is still the same 50 logical pixels it always was. If you place a credit card against the pinched-zoom ruler, the card looks half the size of the ruler's "85.6 mm" line. Reset pinch-zoom to 100% before measuring.

Does desktop browser zoom (Ctrl+plus) affect accuracy?

It can. Some rulers redraw at the new zoom level and stay accurate; others use the original pixel coordinates and are inaccurate. The safe rule is to use the ruler at 100% zoom in your browser. If you have to use it at a different zoom level, recalibrate at that zoom level.

Why is my phone ruler less accurate than my laptop ruler?

Almost always because the laptop ruler is benefiting from a well-known device PPI (Apple ones are easy to recognize) and the phone ruler is not — or because the phone is at a devicePixelRatio of 3 and the tool only handles 2. Calibrate with a credit card on the phone and the gap will close immediately.

Can I be accurate without calibration?

Only if your device has a well-known PPI that the tool's auto-detection covers. iPhones, iPads, recent MacBooks, and a few Samsung flagships are covered by most tools. For anything else — Windows laptops, ChromeBooks, older Androids, mid-range phones — the only way to be accurate is to calibrate.

Bottom line

Pixel density is not optional knowledge for an online ruler. It is the entire reason calibration exists. A tool that gets it right is accurate to within a millimeter on every screen; a tool that ignores it is correct only by accident.

If you want a ruler that gets it right: open Screen Ruler, pick a credit card from the calibration panel, drag the slider until the on-screen rectangle matches the card, and you are done. The pixels-per-millimeter ratio is now correct for your specific panel, and every measurement afterward — in cm, mm, or inches — is accurate to the same precision.