ब्राउज़र फुल-स्क्रीन मोड में CSS कैसे संभालें

परिचय

हम CSS :fullscreen स्यूडो-क्लास का उपयोग करके फुल-स्क्रीन मोड में वेबपेज के लिए स्टाइल्स परिभाषित कर सकते हैं। यह फुल-स्क्रीन-विशिष्ट UI समायोजन की अनुमति देता है।

सिंटैक्स

selector:fullscreen {
  property: value;
}

उदाहरण 1: बेसिक फुल-स्क्रीन स्टाइलिंग

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 3%;
    }
    :fullscreen {
      background-color: thistle;
      font-size: 2em;
    }
    :-webkit-full-screen {
      background-color: thistle;
      font-size: 2em;
    }
    :-ms-fullscreen {
      background-color: thistle;
      font-size: 2em;
    }
  </style>
</head>
<body onclick="fullScreenNow();">
  <p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
  <p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
  <script>
    let item = document.documentElement;
    function fullScreenNow() {
      if (item.requestFullscreen) {
        item.requestFullscreen();
      } else if (item.webkitRequestFullscreen) {
        item.webkitRequestFullscreen();
      } else if (item.msRequestFullscreen) {
        item.msRequestFullscreen();
      }
    }
  </script>
</body>
</html>

उदाहरण 2: फुल-स्क्रीन बैकग्राउंड इमेज

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 3%;
      color: white;
      box-shadow: inset 0 0 40px green;
    }
    :fullscreen {
      background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb-1.2.1&q=80&w=1920") no-repeat;
      font-size: 2em;
    }
    :-webkit-full-screen {
      background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb-1.2.1&q=80&w=1920") no-repeat;
      font-size: 2em;
    }
    :-ms-fullscreen {
      background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb-1.2.1&q=80&w=1920") no-repeat;
      font-size: 2em;
    }
  </style>
</head>
<body onclick="fullScreenNow();">
  <p> Proin eleifend quam nunc, et ultrices neque euismod a.</p>
  <p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
  <script>
    let item = document.documentElement;
    function fullScreenNow() {
      if (item.requestFullscreen) {
        item.requestFullscreen();
      } else if (item.webkitRequestFullscreen) {
        item.webkitRequestFullscreen();
      } else if (item.msRequestFullscreen) {
        item.msRequestFullscreen();
      }
    }
  </script>
</body>
</html>

ब्राउज़र प्रीफिक्स

मॉडर्न क्रॉस-ब्राउज़र कार्यान्वयन

<!DOCTYPE html>
<html>
<head>
  <style>
    :fullscreen,
    :-webkit-full-screen {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    :fullscreen .fs-only,
    :-webkit-full-screen .fs-only {
      display: block;
    }
    .fs-only { display: none; }
    .exit-fs-hint {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      padding: 1rem 1.5rem;
      background: rgba(0,0,0,0.7);
      color: white;
      border-radius: 8px;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <button id="fs-btn">फुलस्क्रीन दर्ज करें</button>
  <div class="fs-only">
    <h1>फुलस्क्रीन मोड सक्रिय</h1>
    <p>यह कंटेंट केवल फुलस्क्रीन में दृश्यमान है।</p>
  </div>
  <script>
    const btn = document.getElementById('fs-btn');
    btn.addEventListener('click', async () => {
      try {
        await document.documentElement.requestFullscreen();
      } catch (err) {
        console.error('फुलस्क्रीन विफल:', err);
      }
    });
    document.addEventListener('fullscreenchange', () => {
      btn.textContent = document.fullscreenElement ? 'फुलस्क्रीन छोड़ें' : 'फुलस्क्रीन दर्ज करें';
    });
  </script>
</body>
</html>

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

• वीडियो प्लेयर्स, गेम्स, प्रेजेंटेशन्स
• कियोस्क मोड, डैशबोर्ड्स
• इमर्सिव रीडिंग/व्यूइंग अनुभव