JavaScript BOM Window Screen ऑब्जेक्ट

JavaScript BOM Window Screen ऑब्जेक्ट में क्लाइंट की स्क्रीन के बारे में जानकारी होती है।

Screen ऑब्जेक्ट की प्रॉपर्टीज

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Window Screen</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } 
    .result { font-size: 18px; font-weight: 500; color: blueviolet; } 
  </style> 
</head> 
<body> 
  <h1>JavaScript BOM Window Screen</h1> 
  <div class="result"></div> 
  <button class="Btn">यहां क्लिक करें</button> 
  <h3>ऊपर दिए गए बटन पर क्लिक करके अपनी स्क्रीन की जानकारी प्राप्त करें</h3> 
  <script> 
    let resultEle = document.querySelector(".result"); 
    document.querySelector(".Btn").addEventListener("click", () => { 
      resultEle.innerHTML = 'screen.width = ' + screen.width + '<br>'; 
      resultEle.innerHTML += 'screen.height = ' + screen.height + '<br>'; 
      resultEle.innerHTML += 'screen.availWidth = ' + screen.availWidth + '<br>'; 
      resultEle.innerHTML += 'screen.availHeight = ' + screen.availHeight + '<br>'; 
      resultEle.innerHTML += 'screen.colorDepth = ' + screen.colorDepth + '<br>'; 
      resultEle.innerHTML += 'screen.pixelDepth = ' + screen.pixelDepth + '<br>'; 
    }); 
  </script> 
</body> 
</html>

आउटपुट

'यहां क्लिक करें' बटन पर क्लिक करने पर:

व्यावहारिक उपयोग:

• रिस्पॉन्सिव डिज़ाइन - स्क्रीन साइज के आधार पर लेआउट एडजस्ट करना
• एनालिटिक्स - विज़िटर की स्क्रीन रिज़ॉल्यूशन ट्रैक करना
• हाई-DPI डिटेक्शन - window.devicePixelRatio के साथ मिलकर रेटिना डिस्प्ले डिटेक्ट करना
• फुलस्क्रीन ऐप्स - उपलब्ध एरिया के आधार पर कैनवास साइज सेट करना

संबंधित प्रॉपर्टीज:

// डिवाइस पिक्सेल रेशियो (रेटिना/हाई-DPI डिटेक्शन)
window.devicePixelRatio  // 1 = स्टैंडर्ड, 2 = रेटिना, 3 = सुपर रेटिना

// व्यूपोर्ट साइज (ब्राउज़र विंडो का दृश्य क्षेत्र)
window.innerWidth, window.innerHeight

// डॉक्यूमेंट साइज
document.documentElement.clientWidth, document.documentElement.clientHeight

नोट:

screen ऑब्जेक्ट फिजिकल स्क्रीन की जानकारी देता है, जबकि window.innerWidth/Height ब्राउज़र व्यूपोर्ट का साइज देता है।