Unity发布WebGL浏览器自动适应宽度高度的方法_unity webgl适配网页

作者：你好赵伟 | 2024-02-17 04:32:50

踩

unity webgl适配网页

Unity发布WebGL浏览器自适应的方法

发布WebGL

发布WebGL

之前常做windows下运行的项目，最近项目的需求是做Web端B/S架构，所以对Unity发布WebGL进行了简单摸索，在此不多赘述发布WebGL的步骤，直接从发布WebGL后形成一个index.html文件和一个资源文件夹说起，生成的index.html如下。

注：本文使用的Unity版本为2018.3.8f

<!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 | DigitalTwinsWebGL</title>
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Bulid.json");
    </script>
  </head>
  <body>
    <div id="gameContainer" style="width: 1920px; height: 1080px; margin: auto"></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

发布WebGL后用Chrome或者Firefox打开可以发现，网页中的Unity窗体是一个固定分辨率的，分辨率可以在编辑器中的projectsetting修改，也可以用文本编辑器打开index.html后修改，但无论怎么修改，都是一个固定分辨率的，浏览器尺寸调小后Unity就显示不全了。

    <div id="gameContainer" style="width: 1920px; height: 1080px; margin: auto"></div>
1

自动匹配窗体分辨率

在网上找了很多相关的方法，好使的并不多，可能是因为我们的Unity版本不同吧，下面方式实测可用。将下面的代码粘贴修改至上面的对应位置即可。宽度99vw、高度98vh正好能够实现Unity窗体布满浏览器而且下面不出现滚动条。

    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
1

改了这一条之后，打开发布的WebGl网页时，Unity窗口可以自动调整大小与窗口适配，但是如果打开网页后再修改浏览器窗口大小，Unity还是不会同步调整，如果窗口变小，还是会有部分内容被遮挡。

响应浏览器调整

要让unity窗口随着浏览器的调整自动调整，需要为HTML中的onresize事件添加修改Unity窗体的代码。在<body>中增加<script>部分的代码，代码中基于百分比的调整方式，注释中的代码是使用绝对数值的方式，绝对数值方式想要没有滚动条需要减去10-20个像素。

  <body>
    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
	<script>
		window.onresize = adjuest;
		function adjuest(){
			var canvas = document.getElementById("#canvas");
			canvas.style.width = "99vw";  //window.innerWidth + "px";
			canvas.style.height = "98vh"  //window.innerHeight + "px";
		}
	</script>		
  </body>
1
2
3
4
5
6
7
8
9
10
11

在网上看了一些教程，也尝试过调整gameContainer（div块）的大小，但是实测完全没反应，可能与平台也有关系，我用的是pc的windows和linux上的Chrome浏览器打开的。如果想要万无一失，可以采用下面的代码

  <body>
    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
	<script>
		window.onresize = adjuest;
		function adjuest(){
			var divCon = document.getElementById("gameContainer");
			var canvas = document.getElementById("#canvas");
			divCon.style.width = "99vw";//window.innerWidth + "px";
			divCon.style.height = "98vh";//window.innerHeight + "px";
			canvas.style.width = "99vw";//window.innerWidth + "px";
			canvas.style.height = "98vh"//window.innerHeight + "px";
		}
	</script>		
  </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完整代码

完整代码如下。

最好不要直接往自己的工程里面复制，不同工程、不同版本的路径可能都会有不同。最好是只将我上面放的代码放到指定位置，比较靠谱。

<!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 | DigitalTwinsWebGL</title>
    <script src="Build/UnityLoader.js"></script>
    <script>
		var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Bulid.json");
	</script>
  </head>
  <body>
    <div id="gameContainer" style="width: 99vw; height: 98vh; margin: auto"></div>
	<script>
		window.onresize = adjuest;
		function adjuest(){
			var divCon = document.getElementById("gameContainer");
			var canvas = document.getElementById("#canvas");
			divCon.style.width = "99vw";//window.innerWidth + "px";
			divCon.style.height = "98vh";//window.innerHeight + "px";
			canvas.style.width = "99vw";//window.innerWidth + "px";
			canvas.style.height = "98vh"//window.innerHeight + "px";
		}
	</script>		
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

第一次发，如果有用希望多多点赞转发支持。
转载请注明出处。

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