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

परिचय

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

सिंटैक्स

screen.availWidth

उदाहरण

<!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 availWidth प्रॉपर्टी</h1>
<button class="btn" onclick="showAvailWidth()">उपलब्ध चौड़ाई दिखाएं</button>
<div class="show"></div>
<script>
  function showAvailWidth() {
    document.querySelector(".show").innerHTML = "उपलब्ध चौड़ाई है: " + screen.availWidth + " px";
  }
</script>
</body>
</html>

आउटपुट

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

availWidth vs width

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

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

नोट

• यह केवल पढ़ने योग्य प्रॉपर्टी है
• मल्टी-मॉनिटर पर, यह प्राथमिक स्क्रीन की उपलब्ध चौड़ाई देता है
• मोबाइल पर, एड्रेस बार/नेविगेशन बार को ध्यान में नहीं रखता (उसके लिए Visual Viewport API उपयोग करें)

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

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