احتاج كود وضع ملئ الشاشة

السلام عليكم  @فهد الجوهري
بعد اذن اخونا  @Mc nabulsy

نعم ممكن عمل زر عند الضغط عليه يتم وضع ملء الشاشة.
لا ادري هل يعمل على نسخة منتداك او لا

جربه
ضع الكود التالي في اي مكان يقبل الهتمل

الكود:


    <style>
button#enter-fullscreen {
    padding: 6px;
    background: #fff495;
}
    </style>

    <div id="fullscreen-container">
        <button id="enter-fullscreen">انتقل إلى وضع ملء الشاشة</button>
    </div>
    <script>
        document.getElementById('enter-fullscreen').addEventListener('click', function() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                document.documentElement.msRequestFullscreen();
            }
        });
    </script>


اخي ضع الكود في اي مكان يقبل html
يعني في صفحات الhtml
في التومبيلات
في التشكيلات العامة
في العناصر المستقلة (عنصر شخصي)

فهد الجوهري كتب:اشتغل في صفحات html
بس ياريت يكون ثابت بدون ما اضغط على الزر ثابق عند فتح الصفحة  ياطريقة تنصف فيها

هل تقصد ان يتم تشغيل ملء الشاشة مباشره بعد دخول الصفحة وبدون ارادت الاعضاء

مرحبًا فهد الجوهري

تشغيل وضع ملء الشاشة تلقائيًا قد يكون مزعجًا لبعض المستخدمين  ومعظم المستخدمين يفضلون التحكم في وضع الشاشة بأنفسهم.
و قد يواجهون صعوبة في التنقل إذا كانت الصفحة تدخل وضع ملء الشاشة تلقائيًا.

وايضا يجب ان تعلم ان العديد من المتصفحات تمنع تشغيل وضع ملء الشاشة تلقائيًا دون تدخل المستخدم كإجراء للحماية.  
لذا، قد لا يعمل الكود الذي يشغل ملء الشاشة تلقائيًا في جميع المتصفحات.

الكود:

  <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', (event) => {
    let elem = document.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { // Firefox
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { // IE/Edge
        elem.msRequestFullscreen();
    }
});
    </script>

تحياتي،

التلقائي قد لا يعمل بسبب اعدادات المتصفح
اليك الكود التالي
ينقل وضع ملء الشاشة عند النقرة الأولى، وينهي وضع ملء الشاشة عند النقرة الثانية،

الكود:

  <style>
        button#enter-fullscreen {
            padding: 6px;
            background: #fff495;
        }
    </style>   
<div id="fullscreen-container">
            
   <button id="enter-fullscreen">
       انتقل إلى وضع ملء الشاشة
   </button>
        
</div>
    <script>
        document.getElementById('enter-fullscreen').addEventListener('click', function() {
            if (document.fullscreenElement) {
             
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) { /* Firefox */
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE/Edge */
                    document.msExitFullscreen();
                }
                this.textContent = "انتقل إلى وضع ملء الشاشة";
            } else {
             
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                    document.documentElement.webkitRequestFullscreen();
                } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                    document.documentElement.msRequestFullscreen();
                }
                this.textContent = "الخروج من وضع ملء الشاشة";
            }
        });
    </script>

تم تعديل الكود بحيث تظهر ثلاثة أزرار بعد تفعيل ملء الشاشة، كل زر سيؤدي وظيفة مختلفة مثل إغلاق المتصفح، تصغيره، أو طيّه.
ولكن تأكد من التحقق من الدعم على المتصفحات المختلفة.،
قد لا تعمل بعض الازرار .

اضف الكود التالي في الهتمل

الكود:

      <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>وضع ملء الشاشة</title>    <style>
        button#enter-fullscreen {
            padding: 6px;
            background: #fff495;
        }
        #fullscreen-controls {
            display: none; /* إخفاء الأزرار في البداية */
            margin-top: 10px;
        }
        #fullscreen-controls button {
            padding: 6px;
            margin: 5px;
        }
        #fullscreen-controls button.close {
            background: #ff6961;
            color: white;
        }
        #fullscreen-controls button.minimize {
            background: #77dd77;
            color: white;
        }
        #fullscreen-controls button.restore {
            background: #fdfd96;
            color: black;
        }
div#fullscreen-controls {
    z-index: 9999999999999999999;
    position: fixed;
    background: #000000;
    left: 0;
    right: 0;
    top: 0;
    padding: 6px;
}

    </style>    
<div id="fullscreen-container">
              
 <button id="enter-fullscreen">
               انتقل إلى وضع ملء الشاشة            
 </button>
              
 <div id="fullscreen-controls">
                  
 <button class="close">
   إغلاق المتصفح  
 </button>
                  
 <button class="minimize">
   تصغير المتصفح  
 </button>
                  
 <button class="restore">
   طوي المتصفح  
 </button>
              
 </div>
          
</div>
     <script>
        const enterFullscreenButton = document.getElementById('enter-fullscreen');
        const fullscreenControls = document.getElementById('fullscreen-controls');

        function enterFullscreen() {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
                document.documentElement.msRequestFullscreen();
            }
        }

        function exitFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) { /* Firefox */
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE/Edge */
                document.msExitFullscreen();
            }
        }

        enterFullscreenButton.addEventListener('click', function() {
            if (document.fullscreenElement) {
                exitFullscreen();
                enterFullscreenButton.textContent = "انتقل إلى وضع ملء الشاشة";
                fullscreenControls.style.display = 'none';
            } else {
                enterFullscreen();
                enterFullscreenButton.textContent = "الخروج من وضع ملء الشاشة";
                fullscreenControls.style.display = 'block';
            }
        });

        document.querySelector('#fullscreen-controls .close').addEventListener('click', function() {
            window.close();
        });

        document.querySelector('#fullscreen-controls .minimize').addEventListener('click', function() {
            window.minimize();
        });

        document.querySelector('#fullscreen-controls .restore').addEventListener('click', function() {
            window.resizeTo(screen.availWidth, screen.availHeight);
        });


    </script>