वही CSS Media Query जिसने मेरे डिज़ाइन के दृष्टिकोण को बदल दिया
मैं स्क्रीन साइज देखकर वेबसाइट डिज़ाइन किया करता था।
मुझे लगता था कि मुझे यह पता लगाने की ज़रूरत है कि उपयोगकर्ता फोन का उपयोग कर रहा है या टैबलेट का। मैंने यह जाँचने की कोशिश की कि क्या स्क्रीन की ऊँचाई उसकी चौड़ाई से अधिक है। इससे केवल ओरिएंटेशन (orientation) का पता चलता था। इससे डिवाइस के प्रकार का पता नहीं चलता था।
मुझे एक बेहतर तरीका मिला। यह जाँचने के लिए media queries का उपयोग करें कि लोग आपकी साइट के साथ कैसे इंटरैक्ट करते हैं।
(hover) क्वेरी यह जाँचती है कि क्या कोई डिवाइस एलिमेंट्स के ऊपर होवर (hover) कर सकता है।
माउस या ट्रैकपैड वाले डिवाइस के लिए @media (hover: hover) का उपयोग करें।
फोन जैसे केवल टच वाले डिवाइस के लिए @media (hover: none) का उपयोग करें।
यह आपको मोबाइल पर होवर संबंधी समस्याओं को ठीक करने में मदद करता है। फोन पर, होवर नियम अक्सर विफल हो जाते हैं या अजीब तरह से काम करते हैं। आप मोबाइल पर बटन दिखाने के लिए और डेस्कटॉप पर उन्हें तब तक छिपाने के लिए कोड लिख सकते हैं जब तक कि उपयोगकर्ता होवर न करे।
Tailwind इसे arbitrary variants के साथ आसान बनाता है:
आप (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 रिपोर्ट करेगा क्योंकि वहां एक माउस मौजूद है।
केवल स्क्रीन साइज के लिए डिज़ाइन करना बंद करें। इस आधार पर डिज़ाइन करना शुरू करें कि उपयोगकर्ता आपके इंटरफ़ेस को कैसे छूते या क्लिक करते हैं।