Unity打包webgl的屏幕适配算法(保持宽高比例)

打包出来后修改index.html。

在head中的script中加入以下方法：

function Reset()
      {
          var canvas = document.getElementById("#canvas");//获取#canvas
          var h=  document.documentElement.clientHeight;//获取body可见区域高度
          var w =  document.documentElement.clientWidth;//获取body可见区域高度
          var scale = 750/1334;
          if (w/h > scale) {canvas.height=h;canvas.width=h*scale;}
          if (w/h < scale) {canvas.height=w/scale;canvas.width=w;}
      }

在body标签中加入:

<body onload="Reset()" onresize="Reset()">
...
</body>

完整html如下:

<!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 | webgl</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 gameInstance = UnityLoader.instantiate("gameContainer", "Build/build.json", {onProgress: UnityProgress});
      function Reset()
      {
          var canvas = document.getElementById("#canvas");//获取#canvas
          var h=  document.documentElement.clientHeight;//获取body可见区域高度
          var w =  document.documentElement.clientWidth;//获取body可见区域高度
          var scale = 750/1334;
          if (w/h > scale) {canvas.height=h;canvas.width=h*scale;}
          if (w/h < scale) {canvas.height=w/scale;canvas.width=w;}
      }
    </script>
  </head>
  <body onload="Reset()" onresize="Reset()">
    <div class="webgl-content" style="width: 100%; height: 100%">
      <div id="gameContainer" style="width: 100%; height: 100%"></div>
      <!-- <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">webgl</div>
      </div> -->
    </div>
  </body>
</html>

这里的页脚需要注释掉。

代码中的750和1334为设计尺寸，可根据自己的设计尺寸进行更改。如：750*1334改为1080*1920.

如果需要显示页脚，则代码中的1334需要改为1334+页脚高度。

原文链接：https://blog.csdn.net/hyx18775752051/article/details/109023740