Unity WebGL canvas非响应式适配浏览器窗口宽高比的实现方法

你的设置不生效是以下几个点导致的：

• JS代码中非移动端分支直接硬编码了canvas.style.width = "1920px"和canvas.style.height = "1080px"，行内样式优先级高于普通CSS，直接覆盖了你设置的100%宽高
• 桌面端#unity-container没有设置占满窗口的尺寸规则，默认随内容尺寸撑开，就算canvas设100%也没有父容器尺寸作为参考
• canvas本身存在内置width/height属性（你HTML里写了1920/1080）和CSS宽高两个维度的尺寸，硬编码的固定值阻断了Unity默认的尺寸同步逻辑

CSS修改 #

替换原有CSS为以下内容，核心是让容器和canvas占满整个窗口：

body { padding: 0; margin: 0; width: 100vw; height: 100vh; overflow: hidden; }
#unity-container { position: absolute; width: 100%; height: 100%; }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #F3F3F0; width: 100% !important; height: 100% !important; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('') 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-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-mobile-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

JS修改 #

删除非移动端分支下硬编码canvas宽高的代码，修改后JS如下：

var buildUrl = "Build";
var loaderUrl = buildUrl + "/WebGL_ResponsiveBuild.loader.js";
var config = {
  dataUrl: buildUrl + "/WebGL_ResponsiveBuild.data",
  frameworkUrl: buildUrl + "/WebGL_ResponsiveBuild.framework.js",
  codeUrl: buildUrl + "/WebGL_ResponsiveBuild.wasm",
  streamingAssetsUrl: "StreamingAssets",
  companyName: "DefaultCompany",
  productName: "WebGL",
  productVersion: "0.1",
};

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 fullscreenButton = document.querySelector("#unity-fullscreen-button");
var mobileWarning = document.querySelector("#unity-mobile-warning");

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  container.className = "unity-mobile";
  config.devicePixelRatio = 1;
  mobileWarning.style.display = "block";
  setTimeout(() => {
    mobileWarning.style.display = "none";
  }, 5000);
} 
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);
    };
  }).catch((message) => {
    alert(message);
  });
};
document.body.appendChild(script);

可选：保持固定宽高比避免画面拉伸 #

如果你的Unity项目是固定比例（比如16:9），不想因为窗口比例变化导致画面拉伸，可以在JS的createUnityInstance的then回调末尾添加以下代码，自动计算适配尺寸并居中留黑边：

function resizeCanvas() {
  const targetRatio = 16 / 9; // 替换为你项目的实际宽高比
  const windowRatio = window.innerWidth / window.innerHeight;
  let width = window.innerWidth;
  let height = window.innerHeight;
  if (windowRatio > targetRatio) {
    width = height * targetRatio;
  } else {
    height = width / targetRatio;
  }
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
  canvas.style.marginLeft = `${(window.innerWidth - width) / 2}px`;
  canvas.style.marginTop = `${(window.innerHeight - height) / 2}px`;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

内容的提问来源于stack exchange，提问作者Max