HTML Screen availHeight प्रॉपर्टी

परिचय

HTML screen.availHeight प्रॉपर्टी उपयोगकर्ता की स्क्रीन की उपलब्ध ऊंचाई (पिक्सेल में) लौटाती है, अर्थात यह ब्राउज़र/ऑपरेटिंग सिस्टम के इंटरफेस फीचर्स (टास्कबार, डॉक, मेनू बार) को छोड़कर वास्तविक उपयोग योग्य क्षेत्र की ऊंचाई देती है।

सिंटैक्स

screen.availHeight

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .show {
    font-size: 1.2rem;
    margin: 1rem auto;
    font-weight: bold;
    font-family: sans-serif;
  }
</style>
<body>
<h1>HTML screen availHeight प्रॉपर्टी</h1>
<button class="btn" onclick="showAvailHeight()">उपलब्ध ऊंचाई दिखाएं</button>
<div class="show"></div>
<script>
  function showAvailHeight() {
    document.querySelector(".show").innerHTML = "उपलब्ध ऊंचाई है: " + screen.availHeight + " px";
  }
</script>
</body>
</html>

आउटपुट

"उपलब्ध ऊंचाई दिखाएं" बटन पर क्लिक करने पर, स्क्रीन की उपलब्ध ऊंचाई प्रदर्शित होगी (उदाहरण: "उपलब्ध ऊंचाई है: 1040 px")।

स्क्रीन प्रॉपर्टीज तुलना

उपयोग के मामले

• उपलब्ध स्थान के अनुसार एप्लिकेशन लेआउट समायोजित करना
• फुलस्क्रीन मोड में कैनवास/गेम आकार सेट करना
• मोडल/पॉपअप की अधिकतम ऊंचाई निर्धारित करना
• उपयोगकर्ता के डिवाइस क्षमताओं का पता लगाना

मोबाइल पर ध्यान दें

मोबाइल डिवाइसेज पर, availHeight आमतौर पर height के बराबर होता है क्योंकि OS UI (एड्रेस बार, नेविगेशन बार) डायनामिकली दिखता/छिपता है। वास्तविक व्यूपोर्ट आकार के लिए window.visualViewport API या window.innerHeight का उपयोग करें।

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

सभी ब्राउज़रों में पूर्ण समर्थन।