Unity 发布webgl 网页自适应 解读canvas

unity 发布 weblgl 后如果打不开 IIS 服务器需要添加以下内容

MIME类型添加: .json text/json
.unity3d application/octet-stream
.unityweb application/binary

本章节重点敲黑板:
以下代码解决自适应

<script>
        //页面大小重绘监听函数
		window.onresize = selfAdaption;
		function selfAdaption(){
		   //document.getElementById("unityContainer") 找到id 为unityContainer div 块 
			var unityContainer = document.getElementById("unityContainer");
			//canvas 在页面上官方示例上是看不到的,那么canvas在哪里,设置到底有没有用
			//其实 canvas 是unityloader.js 在加载时 代码创建的动态画布
			//var e=document.createElement("canvas") 该行代码可以在unityloader.js中找到
			var unitycanvas = document.getElementById("#canvas");
			unityContainer.style.width = "100vw";
			unityContainer.style.height = "100vh";
			unitycanvas.style.width = "100vw";
			unitycanvas.style.height = "100vh";		
		}
	</script>
<!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 | WebglTest</title>
    <!-- 不需要加载unity默认样式 -->
    <!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
    <!-- <link rel="stylesheet" href="TemplateData/style.css"> -->
     <!-- 不需要加载unity进度条 -->
    <!-- <script src="TemplateData/UnityProgress.js"></script> -->
    <script src="Build/UnityLoader.js"></script>
    <script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Webgl.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body >
    <div class="webgl-content" style="overflow:hidden;">
      <div id="unityContainer" style="width: 100%; height: 100%;margin:auto" ></div>
      <div class="footer">
        <!-- 不需要显示logo -->
        <!-- <div class="webgl-logo"></div> -->
         <!-- 不需要全屏按钮 -->
        <!-- <div class="fullscreen" οnclick="unityInstance.SetFullscreen(1)"></div> -->
        <!-- 不需要标题 -->
        <!-- <div class="title">WebglTest</div> -->
      </div>
    </div>
	<script>
		window.onresize = selfAdaption;
		function selfAdaption(){
			var unityContainer = document.getElementById("unityContainer");
			var unitycanvas = document.getElementById("#canvas");
			unityContainer.style.width = "100vw";
			unityContainer.style.height = "100vh";
			unitycanvas.style.width = "100vw";
			unitycanvas.style.height = "100vh";		
		}
	</script>
  </body>
</html>

版权声明:本文为tianyongheng原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。