Unity WebGL监听是否进入全屏模式

Unity WebGL监听是否进入全屏模式

今天遇到一个需求打包成WebGL之后要当做一个iframe,嵌入到别的网页中,其中遇到两个难题。

1.要增加一个全屏模式。

2.全屏的时候使用unity中的title,非全屏的时候要使用网页本身的title。

全屏一开始使用webkitRequestFullScreen,直接控制全屏发现,当点击全屏后,画面出现拉伸,需要点击一下才会回复正常的画面。没有找到有效的解决方法。

于是使用unity自己封装的方法来控制全屏吧。

修改打包后的CSS文件,将全屏按钮移动到画面中。

#unity-fullscreen-button { position: absolute;
bottom: 10px;
width: 38px;
height: 38px;
right: 10px; background: url('fullscreen-button.png') no-repeat center }
www.zeeklog.com  - Unity WebGL监听是否进入全屏模式

第二个问题,做好js调用unity中的代码,控制title的显示和隐藏,然后增加这个方法就可以监听浏览区是否进入全屏状态。

  window.onresize = function() {
    if (document.fullscreenElement) {
        console.log('进入全屏')
        unityInstance.SendMessage("JSToUnity","Show");
    } else {
        // TODO...
        console.log('退出全屏')
        unityInstance.SendMessage("JSToUnity","Close");
    }
};