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

最新推荐文章于 2024-05-14 14:46:20 发布

恩博同学

最新推荐文章于 2024-05-14 14:46:20 发布

阅读量7.6k

点赞数 3

分类专栏： Unity WEBGL 文章标签： Unity WEBGL 自适应浏览器

本文链接：https://blog.csdn.net/u011643463/article/details/90599383

版权

Unity 同时被 2 个专栏收录

35 篇文章 5 订阅

订阅专栏

WEBGL

2 篇文章 0 订阅

订阅专栏

按照默认设置，发布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那一部分显示出来。

恩博同学

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
【Unity WEBGL】WEBGL发布后运行时窗口自适应浏览器大小（网页内全屏）

按照默认设置，发布webgl后，代码如下（发布好的文件，根目录index.html文件）<!DOCTYPE html><html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html...
复制链接

扫一扫