UnityWebGL 设置全屏

这是Unity导出Web默认打开的页面尺寸
修改后效果

修改 index.html 文件

1.div元素的id属性值为"unity-container",宽度和高度都设置为100%,意味着该div元素将占据整个父容器的空间。canvas元素的id属性值为"unity-canvas",宽度和高度都设置为auto,意味着该canvas元素将自适应父容器的大小。

修改如下所示:

html 复制代码
<div id="unity-container" style="width: 100%;height:100%">
      <canvas id="unity-canvas" width=auto height=auto></canvas>

2.将非移动端设备,canvas元素的宽度和高度会设置为100%。

修改如下所示:

XML 复制代码
  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('暂不支持移动端...');
      } else {
        canvas.style.width = "100%";
        canvas.style.height = "100%";
      }

修改style.css

1.设置HTML和BODY元素的宽度和高度为100%,并取消它们的margin和padding。此外,还将overflow属性设置为hidden,以防止内容溢出。

修改如下所示:

XML 复制代码
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
.webgl-content{width: 100%; height: 100%;}
.unityContainer{width: 100%; height: 100%;}
相关推荐
王维志11 小时前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
lrh30251 天前
Custom SRP 12 - HDR
3d·unity·srp·render pipeline
霜绛1 天前
Unity:Json笔记——Json文件格式、JsonUtlity序列化和反序列化
学习·unity·json·游戏引擎
TYayyyyy2 天前
unity 事件、委托
unity
L X..2 天前
Unity反射调用 ReactiveProperty<T>(泛型类型)内部方法时崩溃
unity·c#·游戏引擎·.net
向宇it2 天前
【推荐100个unity插件】将您的场景渲染为美丽的冬季风景——Global Snow 2
unity·游戏引擎·风景
浅丿忆十一2 天前
关于unity一个场景中存在多个相机时Game视图的画面问题
unity·游戏引擎
WLJT1231231232 天前
方寸之间见天地:新兴高端印章的当代破局与价值重构
unity·游戏引擎
软件黑马王子2 天前
2025Unity中的核心数学工具(三)四元数(穿插Unity实战相关案例)
unity·游戏引擎
千忧散2 天前
Unity Socket学习笔记 (三)TCP&UDP
笔记·学习·unity·c#