像素标尺，免费
在屏幕上测量像素距离。
使用方法
- 在标尺上点击拖动以测量距离。标尺以像素为单位显示刻度。
- 起点和终点可移动 · 抓住它们以调整测量。
- 启用垂直模式可测量垂直距离而非水平距离。
- 在标尺下方查看像素数和估算的物理尺寸。
常见问题
物理尺寸的计算有多准确？
物理尺寸基于您设备的像素比和假定的 96 DPI。实际显示器 DPI 各不相同，因此这只是一个近似值。若需对印刷文档进行精确测量，请使用物理标尺。
可以测量垂直距离吗？
可以。启用垂直模式以测量垂直像素距离，而非水平距离。
设备像素比是什么意思？
高密度显示屏（如 Retina 屏幕）的像素比大于 1，意味着多个物理像素代表一个 CSS 像素。此工具以 CSS 像素为单位测量。
What this ruler measures (and what it can't)
This is a free-form measuring stick that lives inside your browser tab. Drag across the canvas above to get a CSS-pixel reading. It works on anything painted inside the browser viewport (a screenshot opened in a tab, a Figma export viewed inline, a live web page in a second tab) but it cannot measure desktop windows, native app UI, the taskbar, or anything painted by the OS-level compositor outside the browser. It also cannot auto-detect element boundaries the way Chrome DevTools or Page Ruler Redux can. That's a different kind of tool. Honest framing matters: this ruler is the right answer when you want a quick, install-free measurement inside the browser.
CSS pixels are not hardware dots
The pixel that JavaScript and CSS use is a W3C-defined reference pixel: "the visual angle of one pixel on a device with a device pixel density of 96 dpi and a distance from the reader of an arm's length." For a nominal arm's length of about 28 inches that visual angle is roughly 0.0213°, or about 0.26 mm at the screen surface. The CSS pixel is a unit of visual angle, not a hardware dot, intentionally device-independent so a 16 px font appears roughly the same physical size on a phone, a laptop, and a TV.
All other absolute CSS lengths are anchored to it: 1in = 2.54cm = 96px, 1mm ≈ 3.78px, 1pt ≈ 1.333px. That fixed conversion table is exactly what makes the "mm at 96 DPI" readout an estimate rather than a true measurement, see below.
Three pixel words designers confuse
| Term | What it counts | Where it lives |
|---|---|---|
| CSS pixel | The W3C reference pixel; the unit JS and CSS use for layout | window.innerWidth, getBoundingClientRect(), every CSS length |
| Device pixel | The actual addressable dot on the panel | screen.width × devicePixelRatio, monitor's native resolution |
| Image pixel | The intrinsic resolution of a raster file | naturalWidth / naturalHeight on an <img> |
Relationship in one sentence: screen physical resolution ≈ CSS viewport size × device pixel ratio, and a sharp image needs an intrinsic width ≥ rendered CSS width × DPR. A logo CSS-sized at 100 px on a phone with DPR 3 needs at least a 300-pixel-wide source image to look crisp.
Device pixel ratio
The DPR readout in the info panel reports window.devicePixelRatio: "the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device." Common values:
- 1.0: classic 96 DPI displays (older monitors, Windows machines at 100% scale).
- 2.0: most Retina MacBooks, many 4K monitors at 200% scale.
- 2.5–3.5: modern phones. iPhone Pro models report 3.0; Android flagships often sit at 2.625 / 2.75 / 3.5.
Two behaviours worth knowing: page zoom (Ctrl/Cmd + and −) does change DPR, so the readout will jump as you zoom. Pinch-zoom magnifies the rendered viewport without changing the underlying CSS pixel size, so it doesn't. Apple introduced the Retina display on the iPhone 4 in 2010, and to keep existing apps and pages from shrinking to a quarter of their previous size when device pixels doubled in both dimensions, iOS introduced "points" (its CSS-pixel equivalent). The web inherited the same model: a 2× CSS pixel maps to four device pixels.
Tap-target size standards
One of the most useful things a pixel ruler does is verify that buttons, links, and icons meet accessibility tap-target minimums. Three standards usually come up together:
| Source | Minimum | Unit | ~Physical (96 DPI) |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6.4 × 6.4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11.6 × 11.6 mm |
| Apple HIG | 44 × 44 | pt | ~11.6 × 11.6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm (160 dpi reference) |
WCAG 2.2 added the 24 × 24 AA criterion in October 2023. The W3C conformance test phrases it as: "It must be conceptually possible to draw a solid 24 by 24 CSS pixel square… completely within the target." There are five exceptions (spacing, equivalent, inline, user-agent control, essential), but in general body UI needs to clear that bar. The older AAA criterion (2.5.5) requires 44 × 44, matching Apple's HIG and roughly matching Material's 48 dp.
The 8-pixel design grid
Most modern UI design rests on an 8-pixel base unit (the "8-point grid" or "8 dp grid" depending on platform). Material Design 2 and 3 both build on it, with smaller 4 dp adjustments for icons and dense components. The choice of 8 isn't accidental: it divides cleanly into common screen widths (320, 360, 375, 1280, 1440), it scales by integer ratios (8, 16, 24, 32, 40, 48), and it pairs naturally with 16 px default body type. A 4-pixel sub-grid handles fine alignment.
Practical use: when you measure a gap as 14 px or 17 px, you've likely caught a CSS unit mistake. The intended value was almost certainly 16. The pixel ruler is the fastest way to spot off-grid spacing.
When you'd reach for a browser ruler
- Design QA on a shipped page. Compare the live result against the spec. Is the gap between two cards 16 px or 24 px?
- Tap-target verification. Drop the ruler over a button to confirm it meets the AA 24 px floor or the AAA 44 px target.
- Spacing audit on a pasted mockup. Open a Figma export in a tab, drop the ruler over it, check the rhythm.
- Responsive-breakpoint sanity checks. The Viewport Width readout doubles as a live breakpoint indicator while you resize the window.
- Education. Show a junior developer what
devicePixelRatioreports on their own machine, and how it changes when they hit Cmd/Ctrl + to zoom. - Accessibility audits. Verify icon-button hit areas, line-length in CSS pixels, and minimum text sizes.
Browser DevTools and other rulers
Every modern browser ships measurement tooling, but it's hidden behind developer panels.
- Chrome DevTools: open the Command Menu (Cmd/Ctrl+Shift+P), type "rulers", select Show rulers on hover. Rulers appear along the top and left of the viewport when you hover over an element. Tied to element selection rather than free-form drag.
- Firefox DevTools: Settings → Available Toolbox Buttons → enable Toggle rulers for the page. A ruler-toggle button appears in the DevTools toolbar; the rulers overlay on page edges with viewport dimensions in the top-right.
- Figma / Sketch / Adobe XD: all have ruler overlays inside their canvas. Figma uses Shift+R to toggle. These are file-bound: they measure inside their own document model, not a deployed web page.
- Browser extensions: Page Ruler Redux, MeasureIt, PixelZoomer, Dimensions. All require install and permissions; all stay confined to the browser. Useful if you need element auto-detection.
A browser-tab ruler like this one is the answer for designers, QA reviewers, and content folk who want a single click rather than DevTools panels or extension installs.
More questions
How accurate is the millimetre readout?
It's an estimate. The conversion uses the W3C-fixed 1 in = 96 CSS px relationship, accurate only when your monitor really is 96 DPI, browser zoom is 100%, and OS scaling is 100%. Actual monitors vary widely: a 24" 1080p panel runs roughly 92 ppi, a 27" 1440p around 109 ppi, a 27" 4K around 163 ppi. Treat the mm number as an order-of-magnitude estimate, never a print-grade measurement. For real physical sizes, hold a physical ruler against the screen.
Why does the device pixel ratio change when I zoom?
Page zoom (Cmd/Ctrl + or −) literally changes the size of a CSS pixel relative to the device pixel, so the ratio between them shifts. Pinch-zoom on touch devices works differently. It magnifies the rendered viewport without changing the underlying CSS pixel size, so it doesn't move the DPR.
Why isn't 1366 × 768 exactly 16:9?
Because it isn't, quite. 1366 ÷ 768 = 1.7786; true 16:9 is 1.7778. The simplified ratio is actually 683:384. Many cheap laptop panels use this slightly off-spec resolution, which is one reason 1080p video sometimes downscales imperfectly on them.
Can I measure outside the browser?
No. A web page can only see and paint inside its own browser tab. To measure desktop windows, native app UI, or anything else outside the browser, you'd need an OS-level utility: macOS Preview's "Show Inspector," Windows' Snipping Tool with the dimensions overlay, or a third-party screen ruler.
Does anything get sent to a server?
No. The ruler is rendered with the HTML5 canvas API; viewport dimensions and DPR come from JavaScript locally; the measurement readout is computed in your browser. The page works offline once it's loaded.