打包出来后修改index.html。
在head中的script中加入以下方法:
function Reset()
{
var canvas = document.getElementById("#canvas");//获取#canvas
var h= document.documentElement.clientHeight;//获取body可见区域高度
var w = document.documentElement.clientWidth;//获取body可见区域高度
var scale = 750/1334;
if (w/h > scale) {canvas.height=h;canvas.width=h*scale;}
if (w/h < scale) {canvas.height=w/scale;canvas.width=w;}
}
在body标签中加入:
<body onload="Reset()" onresize="Reset()">
...
</body>
完整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 | webgl</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/build.json", {onProgress: UnityProgress});
function Reset()
{
var canvas = document.getElementById("#canvas");//获取#canvas
var h= document.documentElement.clientHeight;//获取body可见区域高度
var w = document.documentElement.clientWidth;//获取body可见区域高度
var scale = 750/1334;
if (w/h > scale) {canvas.height=h;canvas.width=h*scale;}
if (w/h < scale) {canvas.height=w/scale;canvas.width=w;}
}
</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 class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">webgl</div>
</div> -->
</div>
</body>
</html>
这里的页脚需要注释掉。
代码中的750和1334为设计尺寸,可根据自己的设计尺寸进行更改。如:750*1334改为1080*1920.
如果需要显示页脚,则代码中的1334需要改为1334+页脚高度。