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

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


<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | WebTesttitle>
    <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">WebTestdiv>
      div>
    div>
  body>
html>

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


<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | OneInstruct1title>
    <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>
  
    <div class="webgl-content" style="width:100%;height:100%">
      <div id="gameContainer" style="width: 100%; height: 100%">div>
	  div>
    div>
  body>
html>

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

你可能感兴趣的:(Unity的webGl)