当前位置:网站首页>Unity webgl adaptive web page size
Unity webgl adaptive web page size
2022-07-07 02:35:00 【Wu Zimu】
I'm using unity 2019.4 LTS edition
There are two steps
1 stay Index.html Revision in China
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | DMJ</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script> var unityInstance = UnityLoader.instantiate("gameContainer", "Build/DMJ_WebApp.json", {
onProgress: UnityProgress}); </script>
</head>
<!-- call OnResize Method , When the user changes the browser size , The screen will adapt -->
<body onResize="ChangeCanvas()">
<div class="webgl-content">
<!-- Set the length and width to be 100% filled -->
<div id="gameContainer" style="width:100%; height:100%"></div>
<!-- The display bar at the bottom , Delete it if you don't need it -->
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">DMJ</div>
</div>
</div>
<!-- Add a method to automatically set the resolution -->
<script type="text/javascript"> function ChangeCanvas() {
document.getElementById("unityInstance").style.width = window.innerWidth + "px"; document.getElementById("unityInstance").style.height = window.innerHeight + "px"; document.getElementById("#canvas").style.width = window.innerWidth + "px"; document.getElementById("#canvas").style.height = window.innerHeight + "px"; } </script>
</body>
</html>
2 modify css The content of The location is in the packaged file /TemplateData/style.css
.webgl-content * {border: 0; margin: 0; padding: 0}
/* Mainly here add to width: 100%; height: 100%;*/
.webgl-content {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
/* If you want to save footer modular , And then let footer Displayed at the top , This kind of treatment */
.webgl-content .footer {margin-top: -45px; margin-left: 5px; margin-right: 5px; z-index: 1; position: relative; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
边栏推荐
- Google Earth Engine(GEE)——Landsat 全球土地调查 1975年数据集
- The empirical asset pricing package (EAP) can be installed through pypi
- 1个月增长900w+播放!总结B站顶流恰饭的2个新趋势
- 豆瓣平均 9.x,分布式领域的 5 本神书!
- Draco - glTF模型压缩利器
- MATLB|具有储能的经济调度及机会约束和鲁棒优化
- MetaForce原力元宇宙佛萨奇2.0智能合约系统开发(源码部署)
- 安全交付工程师
- The last line of defense of cloud primary mixing department: node waterline design
- Summer Challenge database Xueba notes (Part 2)~
猜你喜欢
3 -- Xintang nuc980 kernel supports JFFS2, JFFS2 file system production, kernel mount JFFS2, uboot network port settings, and uboot supports TFTP
Linear list --- circular linked list
服装企业部署MES管理系统的五个原因
Lumion 11.0软件安装包下载及安装教程
用全连接+softmax对图片的feature进行分类
压缩 js 代码就用 terser
MATLB|具有储能的经济调度及机会约束和鲁棒优化
Draco - glTF模型压缩利器
[server data recovery] data recovery case of a Dell server crash caused by raid damage
Douban average 9 x. Five God books in the distributed field!
随机推荐
【森城市】GIS数据漫谈(二)
MySQL
[leetcode]Search for a Range
PCL 常用拟合模型及使用方法
Web3的先锋兵:虚拟人
[xlua notes] array of lua to array of C #
[leetcode]Search for a Range
真实项目,用微信小程序开门编码实现(完结)
C#/VB. Net to delete watermarks in word documents
Linear list --- circular linked list
Apifox,你的API接口文档卷成这样了吗?
postgresql 之 数据目录内部结构 简介
Work of safety inspection
leetcode:5. 最长回文子串【dp + 抓着超时的尾巴】
Yyds dry goods inventory # solve the real problem of famous enterprises: maximum difference
遇到慢SQL该怎么办?(下)
Difference and the difference between array and array structure and linked list
本周 火火火火 的开源项目!
#yyds干货盘点# 解决名企真题:最大差值
Halcon实例转OpenCvSharp(C# OpenCV)实现--瓶口缺陷检测(附源码)