Wiederherstellen der Größe von div Vollbild

Question

Ich habe derzeit eine Schaltfläche, dann, wenn Sie auf den Browser klicken, um im Vollbildmodus gehen, dann würde es eine bestimmte div mit einer ID fScreen bekommen width:100% und height:100%.

Wenn ich die Esc klicken und F11 Taste, erhält der Browser normale Größe zurück, aber die div fScreen bereits den ganzen Raum einnimmt. In meinem Fall die Orginalgröße von fScreen ist

width: 1100px; 
height: 500px; 

Was habe ich bisher eine keydown Funktion benutzt wurde, die die CSS der fScreen wieder auf die ursprüngliche Größe weit hier so kehrt zurück mein Code ist und es nicht zurückkommen es zurück zu seiner normalen Größe.

function mkFull() //make fullscreen 
{  
     //fScreen DIV 
     var elem = document.getElementById("fScreen"); 

     if (elem.requestFullscreen) 
     { 
      elem.requestFullscreen(); 
     } 
     else if (elem.msRequestFullscreen) 
     { 
      elem.msRequestFullscreen(); 
     } 
     else if (elem.mozRequestFullScreen) 
     { 
      elem.mozRequestFullScreen(); 
     } 
     else if (elem.webkitRequestFullscreen) 
     { 
      elem.webkitRequestFullscreen(); 
     } 

     $('#fScreen').css({'width' : '100%' , 'height' : '85%'}); 
     isfull = 1; 

} 

    $(document).keydown(function(e) //when pressed esc and f11 revert back to original size 
    { 
     if (e.keyCode == 122 || e.keyCode == 27) 
     { 
      if(isfull == 1) 
      { 
       $('#fScreen').css({'width' : '100px' , 'height' : '500px'}); 
       isfull = 0; 
      } 
     } 
    }); 

Irgendwelche Ideen, was ich falsch mache?

Answer 1

Sie zum fullscreenchange Ereignis hören konnte: https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange

in dem Handler, halten Sie den Zustand des Bildschirms (isFull)

HTML

<button id="btn">Fullscreen</button> 
<div id="fScreen">fscreen</div> 

JS

var elem = document.getElementById('fScreen'); 
    var isFull = false; 

    function mkFull() { 
     //fScreen DIV 
     var elem = document.getElementById("fScreen"); 

     if (elem.requestFullscreen) { 
      elem.requestFullscreen(); 
     } else if (elem.msRequestFullscreen) { 
      elem.msRequestFullscreen(); 
     } else if (elem.mozRequestFullScreen) { 
      elem.mozRequestFullScreen(); 
     } else if (elem.webkitRequestFullscreen) { 
      elem.webkitRequestFullscreen(); 
     } 
    } 

    document.addEventListener('webkitfullscreenchange', function(e) { 
     isFull = !isFull; 

     if (isFull) { 
      elem.style = 'width: 100%; height: 85%; background: green;'; 
     } else { 
      elem.style = 'width: 100px; height: 500px; background: red;'; 
     } 
    }); 

    document.getElementById('btn').addEventListener('click', mkFull);