Online Screen Ruler - Measure Pixels & Inches on Screen

An online screen ruler is a browser-based tool that lets you measure distances directly on your screen in pixels and inches. It works by tracking your click positions within a measurement zone and calculating the Euclidean distance between two points. For inch conversion, it uses a DPI (Dots Per Inch) setting — by default 96 DPI, which is the CSS standard. You can calibrate the DPI to match your specific monitor for more accurate physical measurements. The visual ruler strip at the top provides tick marks at pixel intervals (every 10, 50, and 100 pixels) with optional inch markings.

The accuracy of inch measurements depends entirely on your DPI calibration. With proper calibration (using a physical object like a credit card), you can achieve accuracy within ±1-2%. Without calibration, the default 96 DPI is accurate for standard desktop monitors but may be off by 10-30% on high-DPI laptop screens, Retina displays, or mobile devices. We strongly recommend using the Calibrate feature — hold a standard credit card (3.37 inches wide) against the screen and adjust the DPI slider until the on-screen ruler matches.

CSS pixels (also called logical pixels) are the abstract unit used by web browsers for layout. One CSS pixel is defined as 1/96 of an inch at arm's length viewing distance. Device pixels (physical pixels) are the actual hardware pixels on your screen. On high-DPI displays like Apple Retina or 4K monitors, one CSS pixel may map to 2, 3, or even 4 device pixels (expressed as devicePixelRatio). Our ruler measures in CSS pixels because that's what web content uses. For physical measurements, calibrate the DPI setting to account for your screen's actual pixel density.

Step 1: Click the Calibrate button to show instructions.
Step 2: Grab a standard credit card (exactly 3.37 inches / 85.6 mm wide — this is a universal standard).
Step 3: Hold the card against your screen, aligning it with the ruler strip.
Step 4: Adjust the DPI slider until the on-screen inch marks match the physical width of the card.
Step 5: Once calibrated, your inch and centimeter measurements will be accurate for your specific screen. Bookmark the page — the DPI setting is preserved in your browser.

Yes! Our screen ruler is fully responsive and touch-friendly. On mobile devices, you can tap to set measurement points and drag them with your finger to adjust. The ruler strip and measurement zone adapt to your screen width. For accurate inch measurements on mobile, calibration is especially important because mobile screens have very high pixel densities (often 300-500+ DPI physically, though CSS scaling reduces the effective DPI). Use the calibration feature with a credit card for best results on phones and tablets.

This tool is versatile and can measure:
• UI elements — buttons, images, banners, margins, and padding on web pages
• Design mockups — verify dimensions in pixels during design review
• Physical objects — place small items against the screen and use the visual ruler (after DPI calibration)
• Diagonal distances — the tool supports arbitrary angles, not just horizontal/vertical
• Screen real estate — measure the visible area of your browser window
It's ideal for web developers, UI/UX designers, graphic designers, and QA testers who need quick on-screen measurements without installing software.

Browser zoom (Ctrl+/- or Cmd+/-) changes the size of CSS pixels relative to the viewport. When you zoom in, each CSS pixel takes up more physical screen space, so the ruler's pixel markings spread out. This doesn't mean the tool is broken — it reflects the actual CSS pixel size at that zoom level. For consistent measurements, we recommend using the tool at 100% zoom (Ctrl+0 or Cmd+0 to reset). If you need to measure at a different zoom level, recalibrate the DPI to match.

Yes, completely free! This online screen ruler requires no installation, no downloads, and no registration. It runs entirely in your web browser using standard web technologies (HTML, CSS, JavaScript). There's no data collection, no ads tracking your usage, and no limitations on how many measurements you can take. Simply open the page and start measuring. It works offline once loaded, and you can bookmark it for quick access anytime.