征服小世界H5全量代码适配 - Unity WebGL移动端全屏方案 - 源码大陆

征服小世界 (H5全能适配方案)

本方案由源码大陆提供：深度解决 Unity WebGL 在移动端浏览器中的 UI 错位与加载引导问题。

技术类型
代码适配

渲染器：WebGL 2.0
容器比例：9:16 (可调)
环境：Nginx / Apache

🚀 部署避坑指南（站长亲测）

跨域隔离： 若遇 SharedArrayBuffer 报错，请在 Nginx 开启跨域隔离头。
比例锁定： CSS 已强制 9:16，如需全屏拉伸请移除容器高度限制。
加载加速： 强烈建议开启 Gzip 压缩，Unity 的 .wasm 加载速度可提升 300%。
CDN 路径： 确保 Build 文件夹权限为 755，否则无法读取配置。

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <title>源码大陆 | SDK</title>
  
  <style>
    /* 基础重置 */
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100%;
      height: 100%;
      background-color: #000 !important;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 严格 9:16 比例容器 (如果要 16:9，请将 56.25vh 改为 177.78vh) */
    #unity-container {
      position: relative;
      width: 56.25vh !important; /* 高度的 9/16 */
      height: 100vh !important;
      max-width: 100vw;
      max-height: 177.78vw; /* 宽度的 16/9 */
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
      background: #231f20;
    }

    /* 画布铺满容器 */
    #unity-canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    /* 加载条居中 */
    #unity-loading-bar {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none;
      width: 80%;
    }

    #unity-progress-bar-empty {
      width: 100%;
      height: 10px;
      background: rgba(255,255,255,0.2);
      border-radius: 5px;
      margin-top: 10px;
    }

    #unity-progress-bar-full {
      width: 0%;
      height: 100%;
      background: #fff;
      border-radius: 5px;
      transition: width 0.2s;
    }

    /* 隐藏不必要的默认页脚 */
    #unity-footer { display: none; }
  </style>

  <script>
    // 你的日志统计脚本保持不变
    let uid = localStorage.getItem('uid');
    if (!uid) {
      uid = random(8);
      localStorage.setItem('uid', uid);
    }
    const appId = 'noadscount';
    const url = `https://voodoo.cn-beijing.log.aliyuncs.com/logstores/log/track?version=1.4.0&APIVersion=0.6.0&loginDays=1&channel=channel&engine=engine&platform=platform&cversion=cversion&appid=${appId}&playerId=${uid}&fingerprintId=${uid}&createdAt=${Date.now()}&event=budding&data=`;
    fetch(url).catch(err => console.log(err));

    function random(l) {
      const charset = 'abcdefghijklmnopqrstuvsxyz0123456789';
      const a = [];
      for (let i = 0; i < l; i++) {
        a.push(charset.charAt(Math.floor((Math.random() * charset.length))));
      }
      return a.join('');
    }
  </script>
</head>
<body>

<div id="unity-container">
  <canvas id="unity-canvas" oncontextmenu="event.preventDefault()"></canvas>
  
  <div id="unity-loading-bar">
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </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 buildUrl = "Build";
  var loaderUrl = buildUrl + "/NoAd.loader.js";
  var config = {
    dataUrl: buildUrl + "/NoAd.data",
    frameworkUrl: buildUrl + "/NoAd.framework.js",
    codeUrl: buildUrl + "/NoAd.wasm",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "sixcube",
    productName: "budding",
    productVersion: "0.0.1",
  };

  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";
      
      // 核心补丁：Unity 实例加载后强制刷新一次尺寸适配
      window.addEventListener('resize', () => {
          // 这里可以添加特定的 Unity 尺寸修正逻辑，但 CSS 方案通常已足够
      });

    }).catch((message) => {
      alert(message);
    });
  };
  document.body.appendChild(script);
</script>
</body>
</html>

📢 更多精彩源码，尽在源码大陆！

我们专注于高品质 H5 游戏源码、Unity 插件及技术方案的深度适配。
如果你在部署过程中遇到任何难题，欢迎在下方评论区留言，站长看到后会第一时间为你解答。

# 深度优化
# 纯净无毒
# 站长带路

原创 温馨提示：

感谢阅读！本文由 源码大陆 原创分享。

如果教程对你有帮助，欢迎转发分享给更多朋友！转载请务必保留本文出处。

本文链接：

THE END