Window matchMedia() विधि

परिभाषा और उपयोग

matchMedia() विधि एक MediaQueryList के साथ अनुसूचक प्रभाव वाला प्रभाव वापस देता है。

दूसरे देखें:

MediaQueryList ऑब्जेक्ट

मीडिया क्वेरी

matchMedia() विधि का मीडिया क्वेरी CSS @media नियम के किसी भी मीडिया विशेषता से हो सकता है, जैसे min-height, min-width, orientation आदि।

उदाहरण

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

उदाहरण

उदाहरण 1

स्क्रीन/विडीयू पॉइंट 700 रोशनी चौड़ा है क्या:

if (window.matchMedia("(max-width: 700px)").matches) {
  // विडीयू चौड़ाई 700 रोशनी तक अथवा कम है
}
  // विडीयू चौड़ाई 700 रोशनी से बड़ी है
}

अपने आप से प्रयोग करें

उदाहरण व्याख्या

इस उदाहरण में मीडिया क्वेरी चलाया गया है और इसे वर्तमान विंडो स्थिति से तुलना की गई है。

यदि आपको विंडो की स्थिति बदलने पर प्रतिक्रियाशील मीडिया क्वेरी चलाना है, तो MediaQueryList ऑब्जेक्ट पर इवेंट सुनवार जोड़ें (देखें नीचे "अधिक उदाहरण"):

उदाहरण 2

यदि विडीयू पॉइंट इंच 500 रोशनी या कम है, तो पृष्ठभूमि रंग को पीला सेट करें, अन्यथा गुलाबी सेट करें:

// मैच फ़ंक्शन बनाएं
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // MediaQueryList ऑब्जेक्ट बनाएं
const mmObj = window.matchMedia("(max-width: 700px)");
// चलने में मैच फ़ंक्शन को आह्वान करें:
myFunction(mmObj);
// मैच फ़ंक्शन को स्थिति परिवर्तन के मापदंड के रूप में जोड़ें:
mmObj.addListener(myFunction);

अपने आप से प्रयोग करें

व्याकरण

window.matchMedia("mediaQuery)

पैरामीटर

पैरामीटर वर्णन
mediaQuery आवश्यक।मीडिया क्वेरी के लिए प्रतिनिधित्व करने वाली स्ट्रिंग

वापसी वलय

श्रेणी वर्णन
वस्तु मीडिया क्वेरी के परिणामों के साथ MediaQueryList वस्तु

ब्राउज़र समर्थन

सभी ब्राउज़र समर्थन करते हैं matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
सापोर्ट 11 सापोर्ट सापोर्ट सापोर्ट सापोर्ट