Touch Target
触控目标
Aliases:触控目标点击热区可点区域按钮太小点不到手指点得中的范围点按热区touch targettap target
What is it
A touch target is the tappable area a finger must hit, not the icon size. Aim for 44×44 CSS px (48dp), about 8px between targets, and pad small icons to size.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Any control a finger or pointer taps, drags or presses
- Icon buttons, close buttons and list rows that look small
- Edge and corner actions that sit close to their neighbours
✕ When not to use
- Decorative icons that are never interactive
- Dense desktop data grids where cells are selected intentionally
- Blowing up hit areas until neighbouring targets overlap
Variants
Comfortable
舒适大热区
Hit area from 44×44 — safest for primary actions
Padded icon
图标加内边距
24px glyph grown to 44px with transparent padding
Inline text link
行内文字链
Extend the hit area with line-height and padding
Implementation
min-height: 44pxmin-width: 44pxpadding: 10pxtouch-action: manipulationaspect-ratio: 1Give interactive elements min-width / min-height: 44px (or 48px) and use gap on the container for spacing instead of margins. Keep the glyph at 24px and pad it to 44px; when padding is awkward, expand with ::before { content: ''; position: absolute; inset: -10px; }. Content only revealed on hover is not a valid target. On touch devices add touch-action: manipulation to drop the 300ms double-tap delay.
Platform API
min-heightmin-widthpaddingtouch-actionIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| Apple HIG | 44×44 pt Apple's recommended minimum tappable size |
| Material Design | 48×48 dp Material's minimum touch target |
| WCAG 2.2 | Target Size (Minimum) — 24×24 The accessibility floor — ship larger in practice |
Related concepts
Breakpoints are viewport widths where a layout changes. Pick them where content crowds, not device names, then stack mobile-first min-width rules.
FoundationSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed withA circular button anchored to a corner of the viewport, floating above the content and carrying the one primary action of the current view (create, compose, scan). Shadow and placement declare "I sit above everything" — louder than an inline primary button, but there should be only one per screen. On click it may expand into a labeled bar or fan out into a set of quick actions.
ComponentsUsed withA visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
AccessibilityUsed with