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

Source: https://www.geekswithgeeks.com/hi/responsive-design/touch-interactions

> Touch के लिए design करें: बड़े tap targets (44x44px), hover-only interactions को हटाएँ, और touch-friendly gestures का उपयोग करें।

## Touch targets और hit area

एक उंगली 40-50px चौड़ी होती है। Touch targets कम से कम 44x44px (Apple) या 48x48px (Android) होने चाहिए ताकि आसानी से tap किया जा सके। Misclicks को prevent करने के लिए targets के बीच spacing प्रदान करें।

## Touch-friendly button sizing

Buttons को mobile पर बड़ा और well-spaced होना चाहिए।

```css
button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-size: 16px; /* Prevents zoom on iOS */
  border: none;
  cursor: pointer;
}

button + button {
  margin-left: 8px; /* Space between buttons */
}
```

## Hover-only interactions से बचें

Touch devices का कोई `:hover` नहीं है। इसके बजाय `:focus` और `:active` का उपयोग करें। एक tooltip जो केवल hover पर appear होता है, mobile पर invisible है — reveal करने के लिए tap का उपयोग करें, या tooltips को default से show करें।

## Hover-only patterns से बचना

Touch devices के लिए :focus-visible और :active use करें।

```css
button { padding: 12px 20px; }
button:hover { background: #0066cc; }
button:focus-visible { outline: 2px solid blue; }
button:active { transform: scale(0.98); }
```

**Quiz:** Mobile पर hover-only tooltips में क्या गलत है?

- [x] वे touch screens पर invisible हैं
- [ ] वे page को slow करते हैं
- [ ] वे बहुत बड़े हैं

*Answer:* वे touch screens पर invisible हैं. Touch devices का कोई hover state नहीं है।