Unity打包Webgl端进行 全屏幕自适应

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

下载地址:链接: index.html和style.css 文件

一:修改 index.html

修改如下:

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

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

csharp 复制代码
  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,以防止内容溢出。

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

总结

可以修改unity的WebGL模板,复制一份出来修改,避免每次打包都修改。

链接: unity webgl 默认模板位置

相关推荐
X_StarX1 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
九班长1 小时前
Golang服务端处理Unity 3D游戏地图与碰撞的详细实现
3d·unity·golang
ysn111114 小时前
NGUI实现反向定位到层级面板结点
unity
Thomas_YXQ11 小时前
Unity3D DOTS场景流式加载技术
java·开发语言·unity
KhalilRuan15 小时前
Unity-MMORPG内容笔记-其一
unity·游戏引擎
向宇it19 小时前
【unity游戏开发——网络】网络游戏通信方案——强联网游戏(Socket长连接)、 弱联网游戏(HTTP短连接)
网络·http·游戏·unity·c#·编辑器·游戏引擎
qq_168278951 天前
Protobuf在游戏开发中的应用:TypeScript + Golang 实践
服务器·golang·游戏引擎
康康的幸福生活1 天前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6661 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
切韵10 天前
Unity编辑器扩展:UI绑定复制工具
ui·unity·编辑器