Unity发布WebGL浏览器自动适应宽度高度的方法

Unity发布WebGL浏览器自适应的方法

发布WebGL

之前常做windows下运行的项目，最近项目的需求是做Web端B/S架构，所以对Unity发布WebGL进行了简单摸索，在此不多赘述发布WebGL的步骤，直接从发布WebGL后形成一个index.html文件和一个资源文件夹说起，生成的index.html如下。

注：本文使用的Unity版本为2018.3.8f



  
    
    
    Unity WebGL Player | DigitalTwinsWebGL

发布WebGL后用Chrome或者Firefox打开可以发现，网页中的Unity窗体是一个固定分辨率的，分辨率可以在编辑器中的projectsetting修改，也可以用文本编辑器打开index.html后修改，但无论怎么修改，都是一个固定分辨率的，浏览器尺寸调小后Unity就显示不全了。

自动匹配窗体分辨率

在网上找了很多相关的方法，好使的并不多，可能是因为我们的Unity版本不同吧，下面方式实测可用。将下面的代码粘贴修改至上面的对应位置即可。宽度99vw、高度98vh正好能够实现Unity窗体布满浏览器而且下面不出现滚动条。

改了这一条之后，打开发布的WebGl网页时，Unity窗口可以自动调整大小与窗口适配，但是如果打开网页后再修改浏览器窗口大小，Unity还是不会同步调整，如果窗口变小，还是会有部分内容被遮挡。

响应浏览器调整

要让unity窗口随着浏览器的调整自动调整，需要为HTML中的onresize事件添加修改Unity窗体的代码。在中增加

在网上看了一些教程，也尝试过调整gameContainer（div块）的大小，但是实测完全没反应，可能与平台也有关系，我用的是pc的windows和linux上的Chrome浏览器打开的。如果想要万无一失，可以采用下面的代码

完整代码

完整代码如下。

最好不要直接往自己的工程里面复制，不同工程、不同版本的路径可能都会有不同。最好是只将我上面放的代码放到指定位置，比较靠谱。



  
    
    
    Unity WebGL Player | DigitalTwinsWebGL

第一次发，如果有用希望多多点赞转发支持。
转载请注明出处。