Full screen in Unity 2020?

[DevNoam]

<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div Is not appears on Unity 2020 Index.html.

Is there other solution to enable Full screen support for Unity 2020?

[kou-yeung]

in Unity2020 WebGL Template you can find the fullscreen code fullscreenButton.onclick = () => { unityInstance.SetFullscreen(1); };

you can try to change this to fullscreenButton.onclick = () => { document.makeFullscreen('unity-container'); };

[DevNoam]

in Unity2020 WebGL Template you can find the fullscreen code fullscreenButton.onclick = () => { unityInstance.SetFullscreen(1); };

you can try to change this to fullscreenButton.onclick = () => { document.makeFullscreen('unity-container'); };

Its working, but the full screen is not a true full screen:

[garethdenyer]

previously in the index.html file there is the line var container = document.querySelector("#unity-container" could it be that we need to refer to the unity-container with the # in front (I tried this but Chrome went bananas)

[mmoy92]

I found some success getting the fullscreen to scale properly when I manually adjusted the width and height properties of the surrounding div and canvas elements: <div style="width: 1001px; height: 630px; border:0; margin:0; background-color: rgb(109,25,13);">

<div id="unity-container">
  <canvas id="unity-canvas" width =  "1001" height= "580"></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
 </div>
</div>

EDIT: This caused problems for me when users zoom in or out of the webpage, so it's not a permanent solution.

[garethdenyer]

mmoy92 - thanks very much for that lead

[guru-1234]

Is there any method to detect exiting full-screen mode through index html file in webgl build

[kou-yeung]

@guru-1234 FYR: https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event you can try document.fullscreenElement to handled the event

[113kangkang]

I found some success getting the fullscreen to scale properly when I manually adjusted the width and height properties of the surrounding div and canvas elements: <div style="width: 1001px; height: 630px; border:0; margin:0; background-color: rgb(109,25,13);">

<div id="unity-container">
  <canvas id="unity-canvas" width =  "1001" height= "580"></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
 </div>
</div>

EDIT: This caused problems for me when users zoom in or out of the webpage, so it's not a permanent solution.
``` } else {

    // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

   // canvas.style.width = "960px";
    //canvas.style.height = "600px";
  }

deactivate This

[Xinayin]

The problem seems to have been solved. Change canvas.style.width and height to the size of the screen when in full screen, and then to the initial size when exiting full screen. At this point, it can be used normally in the full-screen state. Of course, you also need to change the full-screen click method to：

 fullscreenButton.onclick = () => {
            //unityInstance.SetFullscreen(1);
           document.makeFullscreen('unity-container');
          };

  document.addEventListener('fullscreenchange', handleFullscreenChange);
      function handleFullscreenChange() {
      var isFullscreen = document.fullscreenElement !== null;
      if (isFullscreen) {
        console.log('Entered fullscreen mode');
        canvas.style.width = screen.width+ 'px';
        canvas.style.height = screen.height+ 'px';
      } else {
        console.log('Exited fullscreen mode');
        canvas.style.width = "1366px";
        canvas.style.height = "768px";
      }
      }