title: How to scale A Unity-WebGL game to browser window
body: <p>I've built a Unity game for web, setting the default resolution to 1152 x 648 for testing. The output html file had the following code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Unity WebGL Player | MyGame&lt;/title&gt;
      &lt;link rel="shortcut icon" href="TemplateData/favicon.ico"&gt;
      &lt;link rel="stylesheet" href="TemplateData/style.css"&gt;
      &lt;script src="TemplateData/UnityProgress.js"&gt;&lt;/script&gt;  
      &lt;script src="Build/UnityLoader.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/chaChingWeb.json", {onProgress: UnityProgress});
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="webgl-content"&gt;
        &lt;div id="gameContainer" style="width: 1152px; height: 648px"&gt;&lt;/div&gt;
        &lt;div class="footer"&gt;
          &lt;div class="webgl-logo"&gt;&lt;/div&gt;
          &lt;div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"&gt;&lt;/div&gt;
          &lt;div class="title"&gt;MyGame&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I found out that with resolutions below that (such as 1024 x 768), it doesn't scale at all, and the player would need to scroll to see the rest of the content.</p>
  
  <p>So I added the following code:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
    function resizeGame() {
      var winSize = {w:1152, h:648};
      var fill1Div = document.getElementById('gameContainer');
      var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var scaleWidth = width / winSize.w;
      var scaleHeight = height / winSize.h;
      var bgScale = scaleWidth &lt; scaleHeight ? scaleWidth : scaleHeight;
      bgScale = bgScale &gt;= 1 ? 1 : bgScale;
      var bgTransformScale = "scale(" + bgScale + ")";
      fill1Div.style.transform = bgTransformScale;
      fill1Div.style.webkitTransform = bgTransformScale;
      fill1Div.style.MozTransform = bgTransformScale;
      fill1Div.style.msTransform = bgTransformScale;
      fill1Div.style.OTransform = bgTransformScale;
    }
    window.addEventListener("resize", resizeGame);
    window.addEventListener("orientationchange", resizeGame);
    resizeGame();
  &lt;/script&gt;
  </code></pre>
  
  <p>While this does the job nicely, unfortunately it screws up the game itself: for example, in the picture below, I need to click on the "X" to dismiss a pop-up. But when scaled (as with the lower picture), to dismiss the pop-up, I need to click on where the "X" button would have been if it weren't.</p>
  
  <p>This becomes worse the smaller it is.</p>
  
  <p><a href="https://i.stack.imgur.com/jPXQL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jPXQL.png" alt="enter image description here"></a></p>
  
  <p>It's like the game scales, but the actual colliders do not.</p>
  
  <p>I can't set the initial resolution to be too small, as that would force the players with larger screens to use the Full-screen mode.</p>
  
  <p>Is there anything else I can try? Thanks.</p>