How to make a Unity WebGL page appears full screen?

I’m sure you tried to export your Unity game to a WebGL version to publish it online. But it does not appear full screen.

Well, you can replace your index.html code with this, but do it at your own risk:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | New Unity Project</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebBuild.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content" style="display: table; width: 100%; height: 100%;">
      <div id="unityContainer"></div>
    </div>
    <script>
    var mywidth = innerWidth;
    var myheight = innerHeight;
        document.getElementById("unityContainer").style.width = mywidth + "px";
        document.getElementById("unityContainer").style.height = myheight + "px";
    </script>
  </body>
</html>

And, hey, don’t forget you need to change this “Build/WebBuild.json” according your project. In my case the json file name is WebBuild… For you, it can be anything.

Good luck!

Post Views: 588