Unity WebGL全屏实现技术博客：通过修改index.html实现完美全屏体验

原创于 2025-06-23 17:37:55 发布 · 382 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#unity #webgl #html

传统Unity WebGL全屏实现的局限性

默认情况下，Unity WebGL导出的项目包含一个全屏按钮，通过调用 unityInstance.SetFullscreen(1) 方法来实现全屏功能。这种方式存在以下问题：

在某些浏览器中可能不稳定或不生效
无法自定义全屏行为和过渡效果
在移动设备上表现不一致
退出全屏时可能出现布局错乱
不支持窗口大小变化时的自适应调整
文本输入全屏失败

优化方案：通过修改index.html实现全屏

1. 分析原始index.html文件（隐藏下边数据）

unity-fullscreen-button 这是声明的全屏id名称

      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">Web_Input</div>
      </div>

在这里插入图片描述
这是注册的button对象

     var fullscreenButton = document.querySelector("#unity-fullscreen-button");

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

在这里插入图片描述

2. 添加窗口大小变化监听

<body onload="Reset()" onresize="Reset()">

在这里插入图片描述
3. 实现Reset函数

function Reset(){
  canvas.style.height = document.documentElement.clientHeight+'px';
  canvas.style.width = document.documentElement.clientWidth+'px';
}

在这里插入图片描述