首先是最简单的UnityLoader.js取消手机端访问的内容，这个是最简单的步骤，直接修改UnityLoader.js，这个在很多的博客上都有介绍方法了，我这里直接将改好后的文件放上来。
这里有个问题，就是修改了这个文件后，ios平台在用微信浏览器的访问的时候，还是会有弹出的警告，要点OK之后才会正常访问，所以还需要进一步修改。
UnityLoader.js
①之前做过Unity桌面端URL的webgl网页内全屏，用的是如下的方法，
<script type="text/javascript">
function Reset()
{
var canvas = document.getElementById("#canvas");//获取#canvas
canvas.height= document.documentElement.clientHeight;//获取body可见区域高度
canvas.width = document.documentElement.clientWidth;//获取body可见区域高度
}
</script>
<body onresize="Reset()",scroll=no,style="overflow:hidden">
<div class ="webgl-content">
<div id="unityContainer" style="width: 100vw; height: 100vh;"></div>
</body>
通过动态修改unityContainer大小实现的网页内全屏，这种方法在移动端里面会引起unity崩溃，所以不能在移动端使用
②移动端（安卓）和桌面端的web都支持RequestFullscreen()的这个方法，这个方法能够让网页内容占满整个屏幕，而且如果打的是dev包，可以看到unity在打包出来的webgl里面全屏的方法也是在call这个api，具体的部分不去截图了，可以通过查看Pack.wasm.framework.unityweb里面的代码（注意一定是打dev包的情况下去查看，打默认包的代码是不可读的）。
但是这个方法有很大的限制，ios端没有这个api可以调用，所以苹果端的适配成了很大的一个问题（这个方法不能在ios端使用）。
顺带一提，这个是这个是官方WebGLTemplate中使用到的方法，就是右下方那个全屏按钮触发unityInstance.SetFullscreen(1)
③后来了解到了移动端meta标签对viewport的设置，用移动端web网页适配的思维去处理了这个问题，或者你可以直接用老外现成的网页内全屏模板
Better Unity WebGL template当然这个版本没有进度条数值和环形进度条指示，不够用户友好，但是我们可以基于这个版本，再加上下面自定义环形进度条的方法去实现
移动前端开发之viewport的深入理解
使用如下的meta来获得理想的viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=0">
然后在官方模板文件夹的css文件里面，用一张background撑起整个面板
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {width: 100%; height: 100%;}
将加载时在中心展示的logo更换成我们要的图片，但是记得想要替换的图片，名字要用原来的progressLogo.Light.png这个名字，放在TemplateData文件夹里
.webgl-content .logo {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);width: 100%; height: 100%;}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / cover;width: 100%; height: 100%;}
同时，在html页面，将unityContainer的style设置如下
<div id="unityContainer" style="position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);width: 100%; height: 100%;"></div>
即可实现在移动端的unityWebGL网页内全屏
网友评论