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 默认模板位置

相关推荐
Dr.勿忘7 小时前
C#面试常考随笔8:using关键字有哪些用法?
开发语言·unity·面试·c#·游戏引擎
存储服务专家StorageExpert8 小时前
答疑解惑:如何监控EMC unity存储系统磁盘重构rebuild进度
运维·unity·存储维护·emc存储
Petrichorzncu10 小时前
Games104——游戏引擎Gameplay玩法系统:基础AI
游戏引擎
追逐梦想永不停14 小时前
Unity实现按键设置功能代码
unity
我命由我123451 天前
游戏引擎 Unity - Unity 下载与安装
c语言·开发语言·c++·后端·unity·c#·游戏引擎
车载诊断技术1 天前
车载软件架构 --- 基于AUTOSAR软件架构的ECU开发流程小白篇
网络·unity·架构·汽车·电子电器框架·车载充电器(obc)
我命由我123451 天前
游戏引擎 Unity - Unity 启动(下载 Unity Editor、生成 Unity Personal Edition 许可证)
c语言·c++·后端·unity·c#·游戏引擎·ue4
iloveas20141 天前
three.js+WebGL踩坑经验合集(6.1):负缩放,负定矩阵和行列式的关系(2D版本)
线性代数·矩阵·webgl
我命由我123451 天前
游戏开发领域 - 游戏引擎 UE 与 Unity
开发语言·c++·unity·c#·游戏引擎·unreal engine·unreal engine 4
一个一定要撑住的学习者2 天前
Day29(补)-【AI思考】-精准突围策略——从“时间贫困“到“效率自由“的逆袭方案
人工智能·unity·游戏引擎