Device capabilities

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 का उपयोग करें।

/* 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 करें।

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