Touch interactions

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 होना चाहिए।

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

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

त्वरित जाँच: Mobile पर hover-only tooltips में क्या गलत है?

• वे touch screens पर invisible हैं
• वे page को slow करते हैं
• वे बहुत बड़े हैं