Touch vs Mouse Device Detection

Detecting Touch vs Mouse with pointer and hover

The pointer and hover media features let you adapt your UI based on the user's primary input device.

The Queries

/* Touch device (finger, stylus) */
@media (pointer: coarse) {
  .btn { min-height: 48px; min-width: 48px; }
}

/* Mouse / trackpad */
@media (pointer: fine) {
  .btn { min-height: 32px; }
}

/* Device supports hover */
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
}

/* Device does NOT support hover */
@media (hover: none) {
  .tooltip-trigger { /* Show tooltip on tap instead */ }
}

pointer Values

Value	Meaning	Examples
fine	Precise pointing	Mouse, trackpad, stylus
coarse	Imprecise pointing	Finger on touchscreen
none	No pointing device	Keyboard-only, screen reader

hover Values

Value	Meaning	Examples
hover	Primary input can hover	Mouse, trackpad
none	Primary input cannot hover	Touchscreen, keyboard

Practical Guidelines

• Make tap targets at least 48x48px for pointer: coarse
• Only show hover effects when hover: hover is supported
• Replace hover menus with tap/click menus for hover: none
• Consider any-pointer and any-hover for devices with multiple input types (e.g., laptop with touchscreen)