DevTools Logo
All posts

Turning a Phone Into a Bubble Level

August 28, 2026 · DevTools

bubble-level
tilt
device-sensors
diy

Hanging a shelf without a spirit level usually means eyeballing it, or borrowing an app that's mostly ads. The Digital Bubble Level reads the same accelerometer data a physical bubble level's mechanical wizardry mimics — front-back tilt (beta) and side-to-side tilt (gamma) from DeviceOrientationEvent — and turns it into a bullseye you center by hand.

Why ±0.2° and not 0.0°

No consumer accelerometer reports a mathematically perfect zero at rest; sensor noise and micro-vibration mean the reading jitters by a few hundredths of a degree even on a genuinely flat surface. The tool treats anything inside ±0.2° as "level" so the indicator doesn't flicker between green and not-quite-green while you hold the phone still. It's a usability threshold, not a claim about accuracy — for tolerances tighter than that, a machinist's level or a laser level is the right tool, not a phone.

Getting a clean reading

Lay the phone flat against the actual surface, not propped against something else, and give it a second to settle before reading the bullseye — accelerometer output smooths over a short window internally, so a sudden phone movement briefly overshoots before it stabilizes. Screen protectors and thick cases add their own micro-tilt if they're uneven, so check the reading with and without a case if a hang looks off.

Pairing it with a real reference

For anything load-bearing — shelving brackets, curtain rods, picture frames people will notice — cross-check the phone reading against a physical level's actual bubble before you commit to drilling. If you also need to measure a length while you're at it, the Screen & Physical Ruler calibrates CSS pixels against a real-world object so you get both jobs done from the same tab, and the Digital Compass reads the same sensor family for heading instead of tilt.

Tools mentioned in this post