【Unity WEBGL】WEBGL发布后运行时窗口自适应浏览器大小（网页内全屏）_unity webgl自适应浏览器大小

作者：很楠不爱3 | 2024-02-17 04:32:41

踩

unity webgl自适应浏览器大小

按照默认设置，发布webgl后，代码如下（发布好的文件，根目录index.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 | Domo</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/Demo1.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="unityContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
        <div class="title">Domo</div>
      </div>
    </div>
  </body>
</html>

修改Body中这一句代码

<div id="unityContainer" style="width: 960px; height: 600px"></div>

为

<div id="unityContainer" style="width: 99vw; height: 95vh;"></div>

这里面，修改后的宽高值为，窗口占浏览器的比例。

width: 99vw 即在左右留一白边。

height: 95vh 设置为95可以正好将网页底端，显示项目名和Logo那一部分显示出来。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/100059