Unity打包webgl屏幕自适应的写法

最新推荐文章于 2024-07-31 15:47:30 发布

波波斯维奇

最新推荐文章于 2024-07-31 15:47:30 发布

阅读量2.9k

点赞数 2

分类专栏： Unity的webGl

本文链接：https://blog.csdn.net/qq_17367039/article/details/100777680

版权

Unity的webGl 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

前言：因为在最近的项目将在电脑浏览器显示的应用移植到微信端浏览器，打出包放到服务器上使用手机微信浏览器打开发现了屏幕适配有问题，所以就想到了屏幕适配的问题。通过在网上查阅相关资料，发现只需修改webgl包里的一个html文件里的代码就可以解决这个问题。下面就是解决办法：
1.Unity打出的webgl包如图所示，打开其中的index.html文件.。在这里插入图片描述
2.打开后是这样子的，修改其中的部分代码。

<!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 | WebTest</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 gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebTest.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 1080px; height: 1920px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">WebTest</div>
      </div>
    </div>
  </body>
</html>

3.修改成如下图所示的代码。

<!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 | OneInstruct1</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 gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebTest2019-9-10.json", {onProgress: UnityProgress});
	  function Reset()
	  {
		var canvas = document.getElementById("#canvas"); 
        canvas.height= document.documentElement.clientHeight;
        canvas.width = document.documentElement.clientWidth; 
	  }
    </script>
  </head>
  <body onload = "Reset()" onresize = "Reset()">
    <div class="webgl-content" style="width:100%;height:100%">
      <div id="gameContainer" style="width: 100%; height: 100%"></div>
	  </div>
    </div>
  </body>
</html>

4.修改成这样，即可解决Unity打包的屏幕自适应问题。

波波斯维奇

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
Unity打包webgl屏幕自适应的写法

前言：因为在最近的项目将在电脑浏览器显示的应用移植到微信端浏览器，打出包放到服务器上使用手机微信浏览器打开发现了屏幕适配有问题，所以就想到了屏幕适配的问题。通过在网上查阅相关资料，发现只需修改webgl包里的一个html文件里的代码就可以解决这个问题。下面就是解决办法：1.Unity打出的webgl包如图所示，打开其中的index.html文件.。2.打开后是这样子的，修改其中的部分代码。&...
复制链接

扫一扫