Using pointer and hover Media Queries

pointer and hover Media Features

These media features let you adapt your UI based on the user's primary input device capabilities.

The pointer Feature

Value	Meaning	Typical Devices
fine	Accurate pointing (mouse, trackpad, stylus)	Desktop, laptop
coarse	Imprecise pointing (finger on touchscreen)	Phone, tablet
none	No pointing device	Keyboard-only, screen reader

@media (pointer: coarse) {
  /* Larger touch targets for touch devices */
  .btn { min-height: 44px; min-width: 44px; }
}

@media (pointer: fine) {
  /* Compact UI for mouse users */
  .btn { min-height: 32px; }
}

The hover Feature

Value	Meaning
hover	Primary input can hover (mouse)
none	Primary input cannot hover (touch)

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
}

@media (hover: none) {
  /* On touch, use active state instead */
  .card:active {
    background-color: var(--accent);
  }
}

any-pointer and any-hover

While pointer and hover check the primary input, any-pointer and any-hover check all available inputs:

@media (any-pointer: coarse) {
  /* At least one coarse input exists (e.g., laptop with touchscreen) */
}

JavaScript Detection

const hasCoarsePointer = window.matchMedia('(pointer: coarse)').matches;
const canHover = window.matchMedia('(hover: hover)').matches;
const hasTouchAndMouse =
  window.matchMedia('(any-pointer: fine)').matches &&
  window.matchMedia('(any-pointer: coarse)').matches;

Practical Guidelines

• Use pointer: coarse to enlarge touch targets to at least 44px (WCAG recommendation)
• Use hover: hover to gate hover-dependent interactions (tooltips, dropdown menus)
• Use any-pointer for hybrid devices like convertible laptops
• Never assume touch-only = mobile; some desktops have touchscreens