当前位置：首页 > news >正文

【Unity】WebGL全屏问题

news 来源：原创 2025/6/25 11:41:12

1 前言

WebGL项目打包时不可避免的需要面对全屏化问题，或者说是占满网页的问题。这里讨论一下此问题。

2 全屏化

2.1 打包模板

WebGL在打包时可以选择不同的打包模板，其会影响最终打包好的项目在网页中的展现形式。可以在“Project Setting/Player/Setting for WebGL/Resolution and Presentation/WebGL Template”处选择模板。Unity 2022.3.0版本有三种模板可选：Default、Minimal、PWA。这里只讨论Default和PWA，Minimal我看了下没看出来什么特殊的，暂时懒得研究了。

2.2 Default模板

此模板下，打开网页会发现Unity内容只显示在一个内部窗口中，虽然提供了全屏按钮，但这种方式也不是我们想要的，我们希望打开后就是占满网页的。全屏化需要修改打包后项目中的两个文件：index.html、style.css。修改后的文件如下，就不详细展开了，打包项目后可以打开文件对比下文件内容。

index.html

<!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 | ExplodedViewForWeb</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css">
</head>
<body><div id="unity-container" style="width: 100%;height:100%"><canvas id="unity-canvas" style="width: 100%; height: 100%"></canvas><div id="unity-loading-bar"><div id="unity-logo"></div><div id="unity-progress-bar-empty"><div id="unity-progress-bar-full"></div></div></div><div id="unity-warning"> </div><!--将下部的一些Unity自带内容隐藏--><!--<div id="unity-footer"><div id="unity-webgl-logo"></div><div id="unity-fullscreen-button"></div><div id="unity-build-title">ExplodedViewForWeb</div></div>--></div><script>var container = document.querySelector("#unity-container");var canvas = document.querySelector("#unity-canvas");var loadingBar = document.querySelector("#unity-loading-bar");var progressBarFull = document.querySelector("#unity-progress-bar-full");//由于上面将全屏按钮隐藏了，所以后续关于全屏按钮的代码也要注释掉-第一部分//var fullscreenButton = document.querySelector("#unity-fullscreen-button");var warningBanner = document.querySelector("#unity-warning");// Shows a temporary message banner/ribbon for a few seconds, or// a permanent error message on top of the canvas if type=='error'.// If type=='warning', a yellow highlight color is used.// Modify or remove this function to customize the visually presented// way that non-critical warnings and error messages are presented to the// user.function unityShowBanner(msg, type) {function updateBannerVisibility() {warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';}var div = document.createElement('div');div.innerHTML = msg;warningBanner.appendChild(div);if (type == 'error') div.style = 'background: red; padding: 10px;';else {if (type == 'warning') div.style = 'background: yellow; padding: 10px;';setTimeout(function () {warningBanner.removeChild(div);updateBannerVisibility();}, 5000);}updateBannerVisibility();}var buildUrl = "Build";var loaderUrl = buildUrl + "/1.loader.js";var config = {dataUrl: buildUrl + "/1.data",frameworkUrl: buildUrl + "/1.framework.js",codeUrl: buildUrl + "/1.wasm",streamingAssetsUrl: "StreamingAssets",companyName: "DefaultCompany",productName: "ExplodedViewForWeb",productVersion: "0.1",showBanner: unityShowBanner,};// By default Unity keeps WebGL canvas render target size matched with// the DOM size of the canvas element (scaled by window.devicePixelRatio)// Set this to false if you want to decouple this synchronization from// happening inside the engine, and you would instead like to size up// the canvas DOM size and WebGL render target sizes yourself.// config.matchWebGLToCanvasSize = false;if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {// Mobile device style: fill the whole browser client area with the game canvas: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.className = "unity-mobile";// To lower canvas resolution on mobile devices to gain some// performance, uncomment the following line:// config.devicePixelRatio = 1;} else {// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:canvas.style.width = "100%";canvas.style.height = "100%";}loadingBar.style.display = "block";var script = document.createElement("script");script.src = loaderUrl;script.onload = () => {createUnityInstance(canvas, config, (progress) => {progressBarFull.style.width = 100 * progress + "%";}).then((unityInstance) => {loadingBar.style.display = "none";//由于上面将全屏按钮隐藏了，所以后续关于全屏按钮的代码也要注释掉-第二部分//fullscreenButton.onclick = () => {//  unityInstance.SetFullscreen(1);//};}).catch((message) => {alert(message);});};document.body.appendChild(script);</script>
</body>
</html>

style.css

body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
/*#unity-footer { position: relative }*/
.unity-mobile #unity-footer { display: none }
/*#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }*/
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
/*#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }*/
/*#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }*//*上面隐藏的内容为index.html中隐藏的下部内容对应的style设置，因为本体已经隐藏所以这里style也没用了，故隐藏。*//*完成之前的隐藏操作后会在屏幕下部多出白色条纹、右侧也会因此有滑动条，以下设置可以隐藏白条与滑动条，实现较好的全屏效果。*/
html, body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}.webgl-content {width: 100%;height: 100%;
}.unityContainer {width: 100%;height: 100%;
}

2.3 PWA模板

以这种模板打包出来的项目本身就是占据整个网页的。

PS：一般来说不会出什么问题，但我这里，前端在嵌入Unity的网页时发生过网页尺寸固定化无法自动适配的情况，后来前端修改了.css文件才解决，这个问题在后续并没有深究，所以这里记录下。

3 后记

无。