unity导出webgl如何设置横屏

关于横屏，似乎体现不是太好。尝试过旋转CSS样式，但canvas画布严重变形，也不适合。

不过2023版导出webgl后，在手机浏览器中访问时，点击图标即可全屏化。

但在微信内置浏览器中若不开启横屏，则永远无法横屏显示。

此外，微信浏览器访问webgl后，如果变成横屏显示，上面的标题会占据许多内容，显示并不友好，因此仍是推荐引导用户在手机浏览器中访问较佳。

导出webgl后，打开html，在script中发现一行代码：

unityInstance.SetFullscreen(1);

 点击上面图标后，执行此代码则全屏化，若Unity发布时设置的是横屏，则H5页面会转为横屏。

于是把这句话直接写在script里，发现并不能自动全屏化：

script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  loadingBar.style.display = "none";

unityInstance.SetFullscreen(1); //此处在进度完成后直接全屏化并不生效


                fullscreenButton.onclick = () => {
                  unityInstance.SetFullscreen(1);
                  };           
              }).catch((message) => {
                alert(message);
              });
            };

研究发现此时虽然表面上进度加载完成了，实际并没有完全加载，因此需要延迟执行，如：

script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  loadingBar.style.display = "none";
                fullscreenButton.onclick = () => {
                  unityInstance.SetFullscreen(1);
                  };


                  setTimeout(() => {
                      unityInstance.SetFullscreen(1); //延迟执行全屏化，即可自动转横屏
                  },3000)


              }).catch((message) => {
                alert(message);
              });
            };

以上即可自动横屏，由于项目并不大，并未测试延迟多少秒为佳，但几百毫秒时也是无效。

 

此时仍有一个问题：加载时的LOGO，进度条等依然是竖屏显示，此时需要处理的是加载界面，即处理生成的html文件样式。

找到相关的div元素，或新建一个div元素覆盖在最上面，等资源加载完成后再显示画布即可。

关于CSS样式及DIV元素，查看index.html便知，此处不再阐述。