JavaScript में स्क्रीन चौड़ाई किसी निर्दिष्ट मान से अधिक या कम है, इसका पता लगाना सीखें।
कभी-कभी आप किसी शर्त के आधार पर कोड निष्पादित करना चाहते हैं।
कुछ कोड ऐसा हो सकता है जिसे आप बड़े स्क्रीन्स पर दिखाना चाहते हैं लेकिन छोटे स्क्रीन्स (ज्यादातर स्मार्टफोन्स) पर नहीं, उनके सीमित रियल एस्टेट के कारण।
विशिष्ट डिवाइस टाइप डिटेक्शन को संभालना एक जटिल क्षेत्र है, जिस पर डेवलपर्स सहमत नहीं हो पाते। घंटों के शोध के बाद, मैं अभी तक कलम चलाने के लिए पर्याप्त विश्वसनीय डेटा इकट्ठा नहीं कर पाया हूँ (जारी रहेगा..)।
पिक्सेल वैल्यूज़ में डायनामिक रूप से स्क्रीन चौड़ाई का पता कैसे लगाएं
सौभाग्य से, पिक्सेल वैल्यूज़ के आधार पर स्क्रीन साइज़ को टार्गेट करना बहुत आसान है, और यह एक ऐसी सुविधा है जिससे आप कई स्थितियों में लाभान्वित होंगे।
निम्न कोड को अपने ब्राउज़र कंसोल या CodePen जैसे ऑनलाइन एडिटर में पेस्ट करें:
window.addEventListener("resize", function() { if (window.matchMedia("(min-width: 500px)").matches) { console.log("Screen width is at least 500px") } else { console.log("Screen less than 500px") } })अब अपने ब्राउज़र विंडो को संकीर्ण से चौड़ा करने के लिए रिसाइज़ करना शुरू करें, और कंसोल को परिणाम लॉग करते हुए देखें।
JavaScript कोड कैसे काम करता है:
- सबसे पहले, हम
addEventListener()मेथड को विंडो ऑब्जेक्ट से अटैच करते हैं। - इवेंट लिसनर के अंदर हम दो आर्गुमेंट्स सेट करते हैं,
'resize'औरfunction() {}। - पहला आर्गुमेंट इवेंट लिसनर से रिसाइज़ इवेंट्स के लिए सुनने के लिए कहता है (रिसाइज़िंग का एक अंश भी इवेंट के रूप में रजिस्टर होगा)। फिर हम रिसाइज़ इवेंट के आधार पर एक अनाम फ़ंक्शन चलाते हैं।
- अनाम फ़ंक्शन के शरीर के अंदर, हम दो कंडीशनल स्टेटमेंट्स आरंभ करते हैं।
- पहली शर्त: "यदि स्क्रीन चौड़ाई (किसी भी डिवाइस की) कम से कम 500px है, तो console.log('कुछ करें')।" दूसरी शर्त: "यदि स्क्रीन चौड़ाई 500px से कम है, तो console.log('कुछ और करें')।"
CodePen पर कोड के साथ खेलें
