# Device capabilities — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/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.

```css
/* 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.

```javascript
// 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');
}
```