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

परिचय

HTML screen.height प्रॉपर्टी उपयोगकर्ता की स्क्रीन की कुल ऊंचाई (पिक्सेल में) लौटाती है। यह window.screen ऑब्जेक्ट की एक प्रॉपर्टी है और केवल पढ़ने योग्य (read-only) है।

सिंटैक्स

screen.height

उदाहरण

<!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 height प्रॉपर्टी</h1>
<button class="btn" onclick="showHeight()">स्क्रीन ऊंचाई दिखाएं</button>
<div class="show"></div>
<script>
  function showHeight() {
    document.querySelector(".show").innerHTML = "कुल ऊंचाई है: " + screen.height + "px";
  }
</script>
</body>
</html>

आउटपुट

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

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

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

• रिस्पॉन्सिव डिज़ाइन के लिए स्क्रीन आकार का पता लगाना
• बड़े डिस्प्ले के लिए अलग लेआउट लोड करना
• एनालिटिक्स के लिए उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन लॉग करना
• फुलस्क्रीन एप्लिकेशन/गेम्स के लिए

नोट

• यह डिवाइस की भौतिक स्क्रीन है, ब्राउज़र विंडो नहीं
• ब्राउज़र विंडो आकार के लिए window.innerWidth/innerHeight उपयोग करें
• डिवाइस पिक्सेल रेशियो के लिए window.devicePixelRatio उपयोग करें
• मोबाइल पर, यह डिवाइस स्क्रीन रिज़ॉल्यूशन देता है, व्यूपोर्ट नहीं

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

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