कैसे पता लगाएं कि स्क्रीन की चौड़ाई जावास्क्रिप्ट में एक मान से अधिक या कम है?

जानें कि कैसे पता लगाया जाए कि स्क्रीन की चौड़ाई JavaScript में निर्दिष्ट मान से अधिक है या कम।

कभी-कभी आप किसी शर्त के आधार पर कोड निष्पादित करना चाहते हैं।

कुछ कोड हो सकते हैं जिन्हें आप बड़ी स्क्रीन पर दिखाना चाहते हैं लेकिन छोटी स्क्रीन (अधिकांश स्मार्टफ़ोन की तरह) पर उनकी सीमित अचल संपत्ति के कारण नहीं।

विशिष्ट डिवाइस प्रकार का पता लगाना एक जटिल क्षेत्र है, जिसके बारे में डेवलपर्स सहमत नहीं हो सकते हैं। घंटों के शोध के बाद, मैंने अभी भी कागज पर कलम डालने के लिए पर्याप्त विश्वसनीय डेटा एकत्र नहीं किया है (जारी रखा जाना है ..)।

पिक्सेल में गतिशील रूप से स्क्रीन की चौड़ाई का पता कैसे लगाएं

सौभाग्य से, पिक्सेल मानों के आधार पर स्क्रीन आकारों को लक्षित करना बहुत आसान है, और यह एक ऐसी सुविधा है जिससे आप कई स्थितियों में लाभान्वित होंगे।

निम्नलिखित कोड को अपने ब्राउज़र कंसोल या कोडपेन जैसे ऑनलाइन संपादक में पेस्ट करें:

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 है, तो कंसोल.लॉग ('कुछ करें')"। दूसरी शर्त: "अगर स्क्रीन की चौड़ाई 500px से कम है, तो कंसोल.लॉग ('कुछ और करें')"।

कोडपेन पर कोड के साथ खेलें