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%;}
相关推荐
张老师带你学1 小时前
UnityVR弯曲UI
科技·游戏·unity·游戏引擎·模型
张老师带你学2 小时前
unity作业,街角小场景
科技·游戏·unity·游戏引擎·模型
mxwin5 小时前
Unity Shader LOD:动态 Shader 等级切换技术详解
unity·游戏引擎·shader
ALex_zry5 小时前
C++高性能日志与监控系统设计
c++·unity·wpf
魔士于安8 小时前
Unity太空战舰完整工程,包含战损,实时战损
游戏·unity·游戏引擎·贴图·模型
Nuopiane8 小时前
MyPal3(10)视锥体剔除
unity
海海不瞌睡(捏捏王子)10 小时前
Unity知识点概要
unity·1024程序员节
学不完的11 小时前
Zrlog面试问答及问题解决方案
linux·运维·nginx·unity·游戏引擎
小清兔11 小时前
unity游戏制作中问题汇总(持续更新)
游戏·unity·游戏引擎
mxwin1 天前
Unity Shader SRP深入理解内置渲染管线与 URP/HDRP 的底层架构差异
unity·游戏引擎·单一职责原则