# Device capabilities — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/device-capabilities

> Media features जैसे hover, pointer, और screen type का उपयोग करके experiences को users की actual capabilities के अनुसार customize करें।

## Screen width से परे media features

`(hover: hover)` — device hover को support करता है। `(pointer: fine)` — precise pointing (mouse)। `(pointer: coarse)` — imprecise pointing (touch)। `(any-hover: hover)` — कोई भी input hover को support करता है। ये आपको interactions को capabilities के अनुसार adapt करने देते हैं।

## Device input के अनुसार adapt करना

केवल उन devices पर hover tooltips दिखाएँ जो hover को support करते हैं; touch के लिए बड़े buttons का उपयोग करें।

```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 */
}
```

## Touch और hover capabilities को detect करना

Device capabilities के आधार पर features को conditionally enable करें।

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