UnityWebGL 设置全屏

news2024/10/7 10:21:50
这是Unity导出Web默认打开的页面尺寸

修改后效果


修改 index.html 文件

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

修改如下所示: 

<div id="unity-container" style="width: 100%;height:100%">
      <canvas id="unity-canvas" width=auto height=auto></canvas>

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

修改如下所示:

  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,以防止内容溢出。

修改如下所示:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1466400.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CAN转WIFI

一、 产品概述 SG-CAN-WIFI 是专为 CAN 总线网络与无线 IP 网络&#xff08;WLAN 或 Wi-Fi&#xff09;之 间或多个 CAN 总线网络之间通过无线 IP 网络&#xff08;WLAN 或 Wi-Fi&#xff09;传输 CAN 总 线数据而设计&#xff0c;无线 IP 网络&#xff08;WLAN 或 Wi-Fi&…

计算机网络面经-从浏览器地址栏输入 url 到显示主页的过程?

大概的过程比较简单&#xff0c;但是有很多点可以细挖&#xff1a;DNS解析、TCP三次握手、HTTP报文格式、TCP四次挥手等等。 DNS 解析&#xff1a;将域名解析成对应的 IP 地址。TCP连接&#xff1a;与服务器通过三次握手&#xff0c;建立 TCP 连接向服务器发送 HTTP 请求服务器…

JavaSE-05笔记【面向对象02】

文章目录 1. 类之间的关系2. is-a、is-like-a、has-a2.1 is-a2.2 is-like-a2.3 has-a 3. Object类3.1 toString()3.2 finalize()&#xff08;了解即可&#xff09;3.3 与 equals 方法 4. package 和 import4.1 package4.2 import4.3 JDK 常用开发包 5. 访问权限控制5.1 privat…

CLion的bundled MinGW能用在VSCode上吗?

跟着前辈做一个项目&#xff0c;用的极海的MCU&#xff0c;主要用到SPI和USB功能。 官方提供的SDK中的例程有 Eclipse/ Keil/ IAR 版本。 前辈根据Eclipse版本的工程信息文件&#xff08;.project 和.cproject&#xff09; 看里面链接到了哪些文件&#xff0c;然后自己手动写…

Ansible service 模块 该模块用于服务程序的管理

目录 参数将服务设置为 自启动检查端口关闭服务再次查看端口 参数 arguments #命令行提供额外的参数 enabled #设置开机启动。 name #服务名称 runlevel #开机启动的级别&#xff0c;一般不用指定。 sleep #在重启服务的过程中&#xff0c;是否等待。如在服务关闭以后等待2秒再…

gnss尾矿库安全监测系统是什么

【TH-WY1】GNSS尾矿库安全监测系统是一种利用全球导航卫星系统&#xff08;GNSS&#xff09;技术对尾矿库进行安全监测的系统。尾矿库是矿山企业的重要设施之一&#xff0c;用于存放矿山开采过程中产生的尾矿。由于尾矿库具有高能势和复杂的地质环境&#xff0c;存在溃坝、滑坡…

Python:函数

目录 前言&#xff1a; 一、函数的定义 二、函数的调用 三、函数的分类 四、全局变量和局部变量 五、函数的参数 5.1 位置参数 5.2 默认值参数 5.3 可变参数 5.4 关键字参数 5.5 命名关键字参数 5.6 参数的组合 六、函数的递归 前言&#xff1a; 函数就是一个过程…

nginx+keepalived实现nginx高可用集群以及nginx实现Gateway网关服务集群

一、前言 1、简介 Nginx作为一款高性能的Web服务器和反向代理服务器&#xff0c;被广泛使用。且现如今很多高并发场景需要后端服务集群部署&#xff0c;因此nginx也需要支持集群部署从而避免单点故障的问题。 本文将详细介绍使用 KeepalivedNginx 来实现Nginx的高可用集群和N…

Leetcode2583. 二叉树中的第 K 大层和

Every day a Leetcode 题目来源&#xff1a;2583. 二叉树中的第 K 大层和 解法1&#xff1a;层序遍历 排序 先使用层序遍历计算出树的每一层的节点值的和&#xff0c;保存在数组 levelSum 中。然后将数组进行排序&#xff0c;返回第 k 大的值。需要考虑数组长度小于 k 的边…

mysql group by分组后查询无数据补0

mysql经常会用到Group By来进行分组查询&#xff0c;但也经常会遇到一个问题&#xff0c;就是不满足条件的数据就不会显示,如图总共有五个业务,业务状态为3的就不会显示: 因此&#xff0c;想要实现&#xff0c;即使没有数据&#xff0c;也想让count显示出0而不是空的效果&…

day40打卡

day40打卡 343. 整数拆分 状态表示 ​ dp[i] 表示将正整数i拆分成至少两个正整数的和之后&#xff0c;这些正整数的最大乘积 状态转移方程 ​ i > 2 时&#xff0c;对正整数i拆出的第一个正整数是j&#xff0c;则有&#xff1a; 将i拆分为 j 和 i-j&#xff0c;且 i-j…

CUDA编程 - Nsight system Nsight compute 的安装和使用 - (1) 学习记录

Nsight system & Nsight compute 安装和下载地址一、Nsight Systems1.1、主要应用1.2、比较常用的分析1.2.1、情况一1.2.2、情况二 二、Nsight Compute2.1、主要应用2.2、比较常用的分析2.2.1、情况一2.2.2、情况二 三、两者的比较3.1、Nsight systems3.2、Nsight compute …

Runaway Queries 管理:提升 TiDB 稳定性的智能引擎

在数字化系统扮演重要角色的今天&#xff0c;数据库稳定性成为企业关注的核心问题。对于重要计算机系统而言&#xff0c;突发的性能下降可能对业务造成不可估量的损失。为了稳定数据库性能&#xff0c;用户可以从管理流程入手规范变更的测试&#xff0c;或者利用产品手段减少预…

su模型在3d里渲染效果如何---模大狮模型网

SketchUp模型在其他3D应用程序中进行渲染可以获得非常好的效果&#xff0c;取决于您所选择的渲染引擎和技术水平。下面是一些常见的渲染效果和技巧&#xff1a; 一&#xff1a;光照和阴影 通过添加适当的光源和调整阴影设置&#xff0c;可以使SketchUp模型在渲染中呈现出更加真…

python递归算法

递归算法 一、嵌套调用的过程二、递归的基本原则1、递归的基本原则2、无限递归调用3、正常递归调用4、阶乘问题5、力扣&#xff1a;231. 2 的幂6、力扣面试题 08.05. 递归乘法7、力扣、326. 3 的幂8、力扣342. 4的幂 一、嵌套调用的过程 def show1():print("show 1 run s…

第2讲:C语言数据类型和变量

第2讲&#xff1a;C语言数据类型和变量 目录1.数据类型介绍1.1字符型1.2整型1.3浮点型1.4 布尔类型1.5 各种数据类型的长度1.5.1 sizeof 操作符1.5.2 数据类型长度1.5.3 sizeof 中表达式不计算 2.signed 和 unsigned3.数据类型的取值范围4. 变量4.1 变量的创建4.2 变量的分类 5…

Leetcode日记 2583. 二叉树中的第 K 大层和

Leetcode日记 2583. 二叉树中的第 K 大层和 题目&#xff1a;解题思路&#xff1a;代码实现制作不易&#xff0c;感谢三连&#xff0c;谢谢啦 题目&#xff1a; 给你一棵二叉树的根节点 root 和一个正整数 k 。 树中的 层和 是指 同一层 上节点值的总和。 返回树中第 k 大的层和…

Jenkins邮件通知配置(7)

1、安装插件&#xff1a; Email Extension&#xff0c;Email Extension Template&#xff0c;这两个插件可以帮助我们进行邮件的编写发送以及格式化 2、配置jenkins中链接腾讯企业邮箱 先配置发送服务&#xff0c;然后在具体工程中设置接收者 基础信息&#xff1a; POP3/S…

thinkphp5.1 phpexcel 批量导入导出

1.批量导入 public function importExcel(){$authority $this->getUserAuthority(order_input, batch_import);if ($authority[code] ! 0) {return json($authority);}$file request()->file(files);if(empty($file)){return printMsg(-1, "请上传文件");}/…

LeetCode刷题日志-200.岛屿数量

思路&#xff1a; 遍历二维数组&#xff0c;每当遇到一个‘1’进行一次dfs&#xff0c;根据规则&#xff0c;将本次dfs到的所有元素标记为‘0’&#xff08;放置重复dfs&#xff0c;并且能dfs到的元素一定是与当前遍历到的元素属于统一岛屿。&#xff09;最后&#xff0c;dfs的…