MeasureOnScreen

What is MeasureOnScreen?

Ever tried to picture a phone you're about to buy, is a 6.7" screen too big for your hand? How small is the 14 ich laptop when compared to the 15.6 inch model? MeasureOnScreen answers these questions by drawing objects at their true physical size directly on your display.

No coin or credit card based calibration hastle. You tell it the diagonal measurement of your screen, and it calibrates itself to your exact display; then every ruler tick, every shape, and every device outline it draws is a 1 : 1 representation of the real object. Hold a credit card up to a square set to 8.56 × 5.4 cm and they'll match perfectly.

How to Use

1. Go fullscreen

   Click Enter Fullscreen on the welcome dialog (or press F11 on Windows / Ctrl+Cmd+F on Mac). Fullscreen ensures the browser uses every pixel of your display, which is required for the calibration to be accurate.

2. Enter your screen diagonal

   Type your monitor or laptop screen size — the diagonal measurement corner-to-corner. You'll find it in your device specs (e.g. "15.6-inch laptop"). Use the in / cm toggle to switch units, or pick from the common-sizes dropdown.

3. Confirm & calibrate

   Click Confirm & Start. MeasureOnScreen calculates your screen's pixel density and redraws the ruler at physically accurate scale. You can verify immediately by holding a real ruler up to the screen.

4. Use the ruler

   The yellow 30 cm ruler appears on the canvas. Drag it anywhere. Grab the circular handle on the right end to rotate it. Holding Shift snaps rotation to the nearest 45°. The current angle is shown in a tooltip while rotating.

5. Add a shape or screen estimate

   In the Add Shape panel (top right), choose a shape type from the dropdown. Enter the dimensions in centimetres. For the Screen estimator, enter the target device's diagonal and its aspect ratio or pixel resolution. Optionally give the shape a name, then click Add Shape.

6. Compare in real life

   Place your phone, tablet, or any physical object against the screen. The outlines and ruler should match exactly. You can add up to 3 shapes at once, and delete any with the red × button in its corner.

Common Screen Sizes

Frequently Asked Questions

• Does MeasureOnScreen display objects at true 1 : 1 scale? ▼
  Yes — that is its entire purpose. Once you enter your screen's diagonal, it calculates the exact number of CSS pixels per centimetre for your display. Every tick on the ruler and every shape edge is drawn at that scale, so a 10 cm line on screen is 10 cm when measured with a physical ruler.
• How accurate is it? ▼
  Accuracy is limited by how precisely you enter your screen diagonal. If your diagonal is correct to within ±0.1", the resulting scale is accurate to better than 1%. The most common source of error is browser zoom — make sure it is set to 100% (Ctrl+0 / Cmd+0) and that you are using fullscreen mode. A yellow warning banner will appear if MeasureOnScreen detects that your zoom is not at 100%.
• Do I need to calibrate every time I visit? ▼
  On the same device and same browser, your screen diagonal doesn't change, so you only need to enter it once per session. The calibration is remembered for the duration of your browser session — if you navigate to the About page and back, you won't be asked again. Opening a brand-new tab or a different browser will prompt you once more, which takes about 5 seconds.
• Why does the ruler look a different size on different screens? ▼
  Screens vary enormously in pixel density. A 15.6" laptop at 1920×1080 has about 141 PPI, while a 13.3" MacBook at 2560×1600 has about 227 PPI. After calibration MeasureOnScreen adjusts for your specific screen so the physical length is always correct — but the pixel count used to draw it will be different on each device.
• Can I use this on a phone or tablet? ▼
  Yes. MeasureOnScreen uses the Pointer Events API which covers both mouse and touch. Drag and rotate work with your finger just like with a mouse. Note that iOS Safari does not support the Fullscreen API — you'll need to use the manual fullscreen option, or accept slightly reduced accuracy if the browser chrome is visible.
• What does "Screen estimator" do exactly? ▼
  The Screen estimator draws a rectangle that represents the screen of any device at true physical size. You enter the target device's diagonal (e.g. 6.1" for an iPhone) and either its aspect ratio (e.g. 9 : 19.5) or its pixel resolution (e.g. 1179 × 2556). MeasureOnScreen calculates the exact width and height in centimetres and draws the outline at 1 : 1 scale. This lets you hold your hand against the screen and feel whether a phone would fit comfortably, or whether a tablet is the right size for your bag.
• Why does the browser zoom level matter? ▼
  Browser zoom (Ctrl + / Ctrl −) changes how many CSS pixels the browser uses per physical screen pixel. MeasureOnScreen's calibration assumes zoom = 100%. If you zoom in to 110%, every shape is drawn 10% too large. MeasureOnScreen will show an orange warning banner if it detects non-100% zoom. Reset with Ctrl+0 (Cmd+0 on Mac) and refresh the page.
• Does Windows display scaling (125%, 150%) affect accuracy? ▼
  No — Windows display scaling is handled transparently by the browser. MeasureOnScreen uses window.devicePixelRatio together with your entered diagonal to calculate physical pixel density, which correctly accounts for any OS-level scaling. The yellow zoom-warning banner will not appear for display scaling, only for browser zoom.