Unity3D WebGL画布调整大小问题

Question

我的游戏有问题-它在一些电脑上调整正确，但没有其他人能帮我看清楚是怎么回事？在http://pking.io

chrome上的问题是：pking.io加载问题，但是它在Mac上的火狐上工作得很好，或者当我调整了最大操作系统上的chrome窗口的大小后，它就正常工作了，当我在Windows上试用它时，我在火狐上也有同样的问题，就像屏幕截图一样。

CSS:

body { padding: 0; margin: 0px; width: 100%; height: 100% }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 0; top: 0; bottom: 0; }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: url('background.jpg'); background-    size:cover; no-repeat }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 154px; background: url('logo.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-light.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-light.png') no-repeat center }    #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }

HTML:

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas"></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>
  <script type="fb3e0aeb9b24d32156234654-text/javascript">
  var buildUrl = "Build";
  var loaderUrl = buildUrl + "/minimal.loader.js";
  var config = {
    dataUrl: buildUrl + "/minimal.data",
    frameworkUrl: buildUrl + "/minimal.framework.js",
    codeUrl: buildUrl + "/minimal.wasm",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "K Corporation",
    productName: "PKing.io",
    productVersion: "0.4a",
  };

  var container = document.querySelector("#unity-container");
  var canvas = document.querySelector("#unity-canvas");
  var loadingBar = document.querySelector("#unity-loading-bar");
  var progressBarFull = document.querySelector("#unity-progress-bar-full");
  var oldContainerWidth = container.style.width;
  var oldContainerHeight = container.style.height;

  container.style.width = "100%";
  container.style.height = "100%";

  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    container.className = "unity-mobile";
    config.devicePixelRatio = 1;
  } else {
    canvas.style.width = "100%";
    canvas.style.height = "100%";
  }
  loadingBar.style.display = "block";

  var script = document.createElement("script");
  script.src = loaderUrl;
  script.onload = () => {
    createUnityInstance(canvas, config, (progress) => {
      progressBarFull.style.width = 100 * progress + "%";
    }).then((unityInstance) => {
      loadingBar.style.display = "none";
      // fullscreenButton.onclick = () => {
      //   unityInstance.SetFullscreen(1);
      // };

      container.style.width = oldContainerWidth;
      container.style.height = oldContainerHeight;

    }).catch((message) => {
      alert(message);
    });
  };
  document.body.appendChild(script);
</script>

Answer 1

如果可能的话，您可以在最新的统一构建中根据自定义的大小调整其他部件。

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    container.className = "unity-mobile";
    config.devicePixelRatio = 1;
} else {
    canvas.style.width = "100%";   // here it can be adjusted in px 
    canvas.style.height = "100%";  // in my case i used 1305px * 350px
}
loadingBar.style.display = "block";

对于旧版本，请使用

var myGame = UnityLoader.instantiate(gameContainer, "http://mydomain/myfolder/Build/mygame.json", {width: 800, height: 600});