Unity 2021.3.8 WebGL 默认网页内全屏

不会掉头发的程序猿

已于 2024-12-31 15:54:00 修改

阅读量468

点赞数 2

文章标签： unity webgl 游戏引擎

于 2023-11-20 18:12:17 首次发布

本文链接：https://blog.csdn.net/weixin_44389880/article/details/134515175

版权

Unity 2021.3.8 WebGL 默认网页内全屏

- 打包出来的效果图
- 具体操作

打包出来的效果图

在这里插入图片描述

具体操作

unity内选默认模板
修改打包出来的 index.html 文件

直接复制替换就行 图片是改好的 
  <div id="unity-container" style="width: 100%;height:100%">
      <canvas id="unity-canvas" width=auto height=auto></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
      <!-- <div id="unity-footer"> -->
        <!-- <div id="unity-webgl-logo"></div> -->
        <!-- <div id="unity-fullscreen-button"></div> -->
        <!-- <div id="unity-build-title">DesktopManeuversProject</div> -->
      <!-- </div> -->
    </div>

在这里插入图片描述

把这个if 复制整个替换源代码
 if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
       
        var meta = document.createElement('meta');
            meta.name = 'viewport';
            meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
            document.getElementsByTagName('head')[0].appendChild(meta);
            container.className = "unity-mobile";
          
            canvas.style.width = window.innerWidth + 'px';
            canvas.style.height = window.innerHeight + 'px';
 
 
        unityShowBanner('Mobile terminals are not supported...');
      } else {
        canvas.style.width = "100%";
        canvas.style.height = "100%";
      }

注释圈起来的代码
在这里插入图片描述
3.打开style.css文件，添加红色圈起来的代码

在这里插入图片描述

html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
.webgl-content{width: 100%; height: 100%;}
.unityContainer{width: 100%; height: 100%;}