UNITY打包H5解决自适应方法

最新推荐文章于 2025-06-23 17:37:55 发布

原创最新推荐文章于 2025-06-23 17:37:55 发布 · 9.1k 阅读

17 ·

CC 4.0 BY-SA版权

本文详细介绍了Unity WebGL项目的打包流程，包括解决网络请求、JSON序列化、跨域问题及WebGL构建错误。提供了自适应浏览器窗口大小的代码示例，以及如何避免常见错误，如路径中文字符导致的编译失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在head添加

<head>
 
<script>
function Reset()
  
{

var canvas = document.getElementById("#canvas");
canvas.height=  document.documentElement.clientHeight;
canvas.width =  document.documentElement.clientWidth;
 }
</script>
</head>

在body替换添加

<body onresize="Reset()" ,scroll= no, style="overflow:hidden">
<div id="gameContainer" style="width: 100%; height: 100%; margin: auto"></div>

最终

<!DOCTYPE html>

<html lang="en-us">
 
<head>
 
<script>
function Reset()
  
{

var canvas = document.getElementById("#canvas");
canvas.height=  document.documentElement.clientHeight;
canvas.width =  document.documentElement.clientWidth;
 }
</script>
</head>
 <meta charset="utf-8">
   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
   <title>Unity WebGL Player | DT_wnc</title>
 
   <script src="Build/UnityLoader.js"></script>
   
 <script>
    
  var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WanNianChagn-bulid.json");
   
 </script>

  </head>
 
<body onresize="Reset()" ,scroll= no, style="overflow:hidden">
<div id="gameContainer" style="width: 100%; height: 100%; margin: auto"></div>
</body>

</html>

最新的自适应

<!DOCTYPE html>
<html lang="en-us">
  <head>
	 
	    <meta onresize="Reset()">
    <meta charset="utf-8">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | ChuangH5</title>
    <script src="Build/UnityLoader.js"></script>
    <script>
      UnityLoader.instantiate("unityContainer", "Build/3019.json");
    </script>
  </head>
  <body style="width: 100vw; height: 100vh; margin:0" scroll= no, style="overflow:hidden">
	
    <div id="unityContainer" style="width: 100%; height: 100%; margin: auto"></div>
	
	

  </body>
</html>

WebGL打包过程转载

网络请求问题：

1.Http请求使用C#中请求方式，是不支持的，必须使用Unity的Http请求UnityWebRequest/WWW方式。

 using (var webRequest = UnityWebRequest.Get("https://www.baidu.com/"))
     {
         yield return webRequest.SendWebRequest();
         if (!webRequest.isNetworkError && !webRequest.isHttpError)
             Debug.Log(webRequest.downloadHandler.text);
     }

 using (var webRequest = UnityWebRequest.Post("https://www.baidu.com/","参数"))
     {
         yield return webRequest.SendWebRequest();
         if (!webRequest.isNetworkError && !webRequest.isHttpError)
             Debug.Log(webRequest.downloadHandler.text);
     }

2.经常出现的问题就是跨域问题，开发过Web的人员都知道怎么解决，对应的返回头加上Access-Control-Allow-Origin

3.json的序列化和反序列化，使用JSON.NET库没毛病吧，但是下面这样方式就不可以；

string json = "json字符串";Dictionary<string, string> dic = JsonConvert.DeserializeObject<Dictionary<string, string>>(json);
这样没毛病，一切OK，但是要按照下面这样写，就会踩雷

public class Dic{
    public int code { get; set; }
    public Dictionary<string, string> data { get; set; }

    public static Dic DeDic(string json)
    {
        return JsonConvert.DeserializeObject<Dic>(json);
    }}

如果是按照上面这样写，恭喜你，打包出来的东西肯定报错，反序列化得到的全都是null。
最后发现问题的解释：

While many in the Unity Community have succeeded in getting JSON .NET to work for their games, it has never worked properly with iOS or IL2CPP. The iOS errors are due to incompatibilities with AOT (Ahead of Time Compilation) that is used by Mono/IL2CPP in iOS.

就一个意思，兼容问题不支持。

4.关于出现将打包出来的项目发布到本地Web服务，然后通过网页访问出现WebGL build error :Uncaught SyntaxError: Unexpected token < || UnityLoader.js is not a function (SOLVED)错误
Unity打包WebGL所遇到的坑！！！

解决办法：
①新建一个名为文本文件
②打开该文本文件，然后给该文件添加如下内容

 <configuration>
        <system.webServer>
           <staticContent>
              <mimeMap fileExtension=".json" mimeType ="text/json" />
              <mimeMap fileExtension=".unity3d" mimeType ="application/octet-stream" />
              <mimeMap fileExtension=".unityweb" mimeType ="application/binary" />
           </staticContent>
        </system.webServer> 
</configuration>

或者：

<configuration>
　　<system.webServer>
　　　　　　<staticContent>
            <remove fileExtension=".mem" />
      <remove fileExtension=".data" />
      <remove fileExtension=".unity3d" />
      <remove fileExtension=".jsbr" />
      <remove fileExtension=".membr" />
      <remove fileExtension=".databr" />
      <remove fileExtension=".unity3dbr" />
      <remove fileExtension=".jsgz" />
      <remove fileExtension=".memgz" />
      <remove fileExtension=".datagz" />
      <remove fileExtension=".unity3dgz" />
      <remove fileExtension=".json" />
      <remove fileExtension=".unityweb" />
 
      <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".data" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".membr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".databr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
      <mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
      <mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
　　　　</staticContent>
　　</system.webServer>
</configuration>

③保存该文本文件内容
④将该文本文件修改为web.config文件保存，如下所示：

⑤将该文本文件放置打包出来的根目录下面即可（也就是和index.html同级别），如下图所示：

打包过程中编译出现错误：

打包出现：
Unity打包WebGL所遇到的坑！！！

这种问题有么有？有么有？最后发现打包的路径不能有中文，工程路径也不能有中文，太气人！！！

**打包结束，index.html改变自适应浏览器

添加：**

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>


 <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});

    function autoAdj(){
            var canvas = document.getElementById("#canvas");
            canvas.height=document.documentElement.clientHeight*0.99;
            canvas.width=document.documentElement.clientWidth*0.99;
            $("#gameContainer").height(document.documentElement.clientHeight*0.99);
            $("#gameContainer").width(document.documentElement.clientWidth*0.99);
        }
</script>

解决警告问题：在Build文件夹找到UnityLoader.js文件，搜索UnityLoader.SystemInfo.mobile，然后删除代码：

UnityLoader.SystemInfo.mobile ? e.popup(
			"Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.", [{
				text: "OK",
				callback: t
			}]) :

修改代码：

 ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1

为：

["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) <1