Unity: WebGL发布后在浏览器上运行时窗口大小自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了Unity: WebGL发布后在浏览器上运行时窗口大小自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

发布后在浏览器上按f11时的效果图

unity webgl 自适应,unity,前端,web,html

这个效果是根据19：6（也就是1920：1080的页面大小来设计的）

整体来说修改以下两个文件来进行达成效果预览，第一个是index.html、第二个是TemplateData文件下的style.css文件

unity webgl 自适应,unity,前端,web,html

修改index.html

修改对比

其中上图一段注释的脚本是webgl进入全屏状态的的脚本，就是显示下图的脚本（去掉就不显示下面的东西，不去掉就显示下面的东西），要不要注释都一样没有什么影响。

unity webgl 自适应,unity,前端,web,html

上图第一段代码替换

 <div id="unityContainer" style="width: 100%; height: 100%;"></div>

第二段代码替换

<script>
	  var gameContainer=document.getElementById('unityContainer');
	  function gameContainerResize(){
	    var w=window.innerWidth || document.body.clientWidth,
		h=window.innerHeight || document.body.clientHeight,
		ratio = 16/9,
		r=w/h;
		var setW,setH,setTop,setLeft;
		if(r>=ratio){
		  setW=h*ratio;
		  setLeft=(w-setW)/2;
		  
		}
		else{
		  setH=w/ratio;
		  setTop=(h-setH)/2;
		}
		gameContainer.style.width=(setW || w)+'px';
		gameContainer.style.height=(setH || h)+'px';
		gameContainer.style.top=(setTop || 0)+'px';
		gameContainer.style.left=(setLeft || 0)+'px';
	}
	  window.addEventListener('resize',gameContainerResize);
	  gameContainerResize();
	</script>

修改style.css文件

源代码与修改代码对比

unity webgl 自适应,unity,前端,web,html

html.body{height: 100%; width:100%;margin:0;}

.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: relative; height: 100%; width:100%; overflow:hidden;background-color:#333}
.webgl-content canvas{height:100%!important;width:100%!important}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer{display:none}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

以上就是webgl自适应浏览器大小的全过程了