ज्या CSS Media Query मुळे माझा डिझाइन दृष्टिकोन बदलला
मी स्क्रीनचा आकार तपासून वेबसाइट्स डिझाइन करायचो.
वापरकर्ता फोन वापरत आहे की टॅब्लेट, हे ओळखणे आवश्यक आहे असे मला वाटायचे. मी स्क्रीनची उंची ही रुंदीपेक्षा जास्त आहे का, हे तपासण्याचा प्रयत्न केला. यामुळे फक्त ओरिएंटेशन (orientation) तपासले जात असे. यामुळे डिव्हाइसचा प्रकार (device type) तपासला जात नव्हता.
मला एक उत्तम मार्ग सापडला. लोक तुमच्या साइटसोबत कसे संवाद साधतात (interact करतात), हे तपासण्यासाठी media queries वापरा.
(hover) क्वेरी डिव्हाइस एलिमेंट्सवर 'hover' करू शकते की नाही हे तपासते.
माऊस किंवा ट्रॅकपॅड असलेल्या डिव्हाइसेससाठी @media (hover: hover) वापरा.
फोनसारख्या फक्त टच-आधारित (touch-only) डिव्हाइसेससाठी @media (hover: none) वापरा.
यामुळे तुम्हाला मोबाईलवरील hover च्या समस्या सोडवण्यास मदत होते. फोनवर, hover नियम अनेकदा निकामी ठरतात किंवा विचित्र पद्धतीने काम करतात. तुम्ही मोबाईलवर बटणे दाखवण्यासाठी आणि डेस्कटॉपवर युजरने hover करेपर्यंत ती लपवण्यासाठी कोड लिहू शकता.
Tailwind 'arbitrary variants' वापरून हे सोपे करते:
तुम्ही (pointer) वापरून पॉइंटरची अचूकता (pointer precision) देखील तपासू शकता.
• Mouse: hover आणि fine pointer • Trackpad: hover आणि fine pointer • Finger touch: no hover आणि coarse pointer • Stylus: सहसा hover आणि fine pointer
जर तुम्हाला फक्त मुख्य डिव्हाइसऐवजी प्रत्येक इनपुट डिव्हाइस तपासायचे असेल, तर हे वापरा:
• @media (any-hover: hover) • @media (any-pointer: fine)
माऊस जोडलेला टॅब्लेट त्याच्या प्राथमिक इनपुटसाठी hover: none रिपोर्ट करू शकतो. परंतु, माऊस उपलब्ध असल्यामुळे तो any-hover: hover रिपोर्ट करेल.
फक्त स्क्रीनच्या आकारासाठी डिझाइन करणे थांबवा. युजर्स तुमच्या इंटरफेसला कशा प्रकारे टच किंवा क्लिक करतात, त्यानुसार डिझाइन करायला सुरुवात करा.