Click & Drag to Measure
Click anywhere in the ruler area and drag diagonally to draw a measurement box. Release to lock the measurement. Use the history panel to recall previous measurements.
Screen Ruler
Measure elements on screen with pixel precision. Draw a selection box to measure width, height and more.
Common Sizes Reference
| Name | Width | Height | Note |
|---|---|---|---|
| Mobile S | 320px | — | iPhone SE |
| Mobile M | 375px | — | iPhone 12/13 |
| Mobile L | 414px | — | iPhone Plus |
| Tablet | 768px | — | iPad portrait |
| Laptop | 1024px | — | Small laptop |
| Desktop | 1280px | — | Standard desktop |
| Full HD | 1920px | 1080px | 1080p monitor |
| 4K | 3840px | 2160px | UHD monitor |
| Favicon | 16px | 16px | Browser favicon |
| Touch target | 44px | 44px | WCAG min touch |
| OG Image | 1200px | 630px | Open Graph / Twitter |
| Banner | 728px | 90px | Leaderboard ad |
Tips for Using the Ruler
Switch Units Instantly
Toggle between px, rem (base 16px), cm (96 DPI) and vw (viewport-relative) without re-measuring. The all-units breakdown panel shows all four at once for quick comparison.
Use Guide Lines
Enable the guide crosshair to see precise cursor coordinates as you hover. Guides update in real time, making it easy to align measurements to specific pixels.