前言：因为在最近的项目将在电脑浏览器显示的应用移植到微信端浏览器，打出包放到服务器上使用手机微信浏览器打开发现了屏幕适配有问题，所以就想到了屏幕适配的问题。通过在网上查阅相关资料，发现只需修改webgl包里的一个html文件里的代码就可以解决这个问题。下面就是解决办法：
1.Unity打出的webgl包如图所示，打开其中的index.html文件.。
2.打开后是这样子的，修改其中的部分代码。
<!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 | WebTest</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 gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebTest.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 1080px; height: 1920px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">WebTest</div>
</div>
</div>
</body>
</html>
3.修改成如下图所示的代码。
<!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 | OneInstruct1</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 gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebTest2019-9-10.json", {onProgress: UnityProgress});
function Reset()
{
var canvas = document.getElementById("#canvas");
canvas.height= document.documentElement.clientHeight;
canvas.width = document.documentElement.clientWidth;
}
</script>
</head>
<body onload = "Reset()" onresize = "Reset()">
<div class="webgl-content" style="width:100%;height:100%">
<div id="gameContainer" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
4.修改成这样，即可解决Unity打包的屏幕自适应问题。
版权声明：本文为qq_17367039原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。