🖥️ What Is PPI (Pixels Per Inch)?
PPI stands for pixels per inch: it describes how densely packed the physical pixels are on a screen. A higher PPI means a sharper display because more pixels fit into the same physical space.
A standard 1080p monitor at 24 inches has around 92 PPI. A Retina MacBook runs at 254 PPI. A flagship smartphone reaches 460 PPI. These are vastly different densities, yet all of them use the same CSS pixel standard.
🤔 The CSS Inch Problem
When the CSS specification was written, it defined 1 inch = 96 pixels. This made sense in the 1990s when virtually all monitors ran at around 96 DPI, on those screens, a CSS "inch" looked like a physical inch.
But here's the problem: that definition is now frozen, even though modern screens are 2–5× denser. CSS still says 1 inch = 96 pixels, but 96 physical pixels on a 460 PPI iPhone is only about 0.21 physical inches. This is why every online ruler that doesn't calibrate is inaccurate.
📊 Physical Size of a CSS Inch on Different Screens
| Screen | PPI | DPR | 1 CSS inch (physical) | Verdict |
|---|---|---|---|---|
| Standard 1080p monitor (24") | 92 | 1× | 1.04" | Close to actual ✓ |
| 4K monitor (27") | 163 | 2× | 0.59" | Needs calibration |
| MacBook Pro 14" (2021+) | 254 | 2× | 0.38" | Needs calibration |
| iPhone 15 Pro | 460 | 3× | 0.21" | Always calibrate |
| iPad Pro 12.9" | 264 | 2× | 0.36" | Needs calibration |
| Samsung Galaxy S24 | 416 | 3× | 0.23" | Always calibrate |
As the table shows, only on a standard 1080p monitor does a CSS inch come close to a physical inch. On everything else, tablets, laptops, and phones, a CSS inch is significantly smaller than a real inch.
🔍 What Is Device Pixel Ratio (DPR)?
Device Pixel Ratio (DPR) is the ratio between physical pixels and CSS pixels. On a screen with DPR = 2 (like most modern phones and Retina MacBooks), every CSS pixel is drawn using a 2×2 grid of 4 physical pixels, giving a sharper image but meaning CSS coordinates operate at half the density of the physical screen.
✅ How Calibration Solves This
Screen calibration works by measuring a known physical object (a credit card at exactly 85.6 mm wide) in CSS pixels, then calculating:
cssPixelsForCreditCard = 342 // (example measurement)
creditCardWidth_mm = 85.6
pxPerMm = 342 / 85.6 = 3.995
pxPerCm = pxPerMm × 10 = 39.95
// Now every measurement uses this ratio
display_px = measurement_cm × 39.95
This bypasses CSS assumptions entirely. Instead of trusting that 96px = 1 inch, the ruler uses the measured physical density of your specific screen, resulting in accuracy to ±0.5 mm on most displays.
🎯 Why You Only Need to Calibrate Once
Your screen's physical pixel density doesn't change over time. Online Ruler Pro saves your screen's pixel-per-cm ratio to your browser's local storage. Every time you return, the ruler is already calibrated.
You need to recalibrate when you switch to a different monitor, clear your browser's local storage, switch to a different browser on the same device, or connect an external monitor with a different resolution.