Lesson 15 / 25

Device capabilities

Use media features like hover, pointer, and screen type to tailor experiences for capabilities users actually have.

Media features beyond screen width

(hover: hover) — device supports hover. (pointer: fine) — precise pointing (mouse). (pointer: coarse) — imprecise pointing (touch). (any-hover: hover) — any input supports hover. These let you adapt interactions to capabilities.

Adapting to device input

Show hover tooltips only on devices that support hover; use larger buttons for touch.

/* Devices without hover: no tooltip visibility change on hover */
@media (hover: none) {
  .tooltip { display: none; }
  .icon { padding: 12px; } /* Touch-friendly */
}

/* Devices with hover: show tooltip on hover */
@media (hover: hover) {
  .icon:hover .tooltip { display: block; }
  .icon { padding: 8px; } /* Compact for mouse */
}

Detecting touch and hover capabilities

Conditionally enable features based on device capabilities.

// Detect touch support
const isTouch = () => {
  return (('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0));
};

// Media query check
if (matchMedia('(hover: hover)').matches) {
  // Device supports hover
  document.body.classList.add('has-hover');
} else {
  document.body.classList.add('no-hover');
}