冲入战局H5适配方案 - Unity WebGL 16:9 全屏锁定与点击偏移修复 - 源码大陆

冲入战局 (Unity WebGL 专项适配版)

本方案由源码大陆优化：针对 Unity 引擎在 Web 端的渲染特性，强制执行 16:9 比例锁定，并同步物理像素比以消除触控死角。

渲染引擎
Unity 3D

适配技术：Dynamic Ratio Locking
解决痛点：点击偏移 / 比例失真

🛠️ 逻辑优化说明（站长亲测）

16:9 动态比例校正： Unity 的 Canvas 默认容易在手机端被拉伸。本方案通过 JS 计算 DESIGN_RATIO，确保无论屏幕如何旋转，游戏画面始终保持 16:9 比例且居中显示。
DPI 物理对齐： 在 config 配置中引入了 devicePixelRatio，这对于解决 iPhone 及高刷新率安卓手机上“看得见按钮却点不着”的偏移 Bug 至关重要。
强制全屏黑域： 通过 CSS 注入 inset: 0 和 display: flex，彻底消除了 Unity 网页版常见的页脚滚动条干扰，提供纯净的 APP 级沉浸感。

启动延迟刷帧： Unity 实例创建完成后，代码会执行一次 setTimeout 重新校准，防止因加载进度条消失导致的瞬间布局错位。

<!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 | Spinner Merge</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>

    <style>
      /* 强制全屏且背景黑色 */
      html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #000 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      #unity-container {
        position: relative !important;
        background: #000 !important;
      }
      /* 移除 Canvas 的初始宽高，交给 JS 动态控制 */
      #unity-canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
      }
      /* 隐藏可能挡住按钮的页脚 */
      #unity-footer {
        display: none !important;
      }
      #unity-loading-bar {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="unity-container">
      <canvas id="unity-canvas" oncontextmenu="event.preventDefault()" tabindex="99"></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>

    <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");

      // --- 核心：16:9 自适应逻辑 ---
      const DESIGN_RATIO = 16 / 9;

      function resizeGame() {
        var screenW = window.innerWidth;
        var screenH = window.innerHeight;
        var targetW, targetH;

        if (screenW / screenH > DESIGN_RATIO) {
          targetH = screenH;
          targetW = screenH * DESIGN_RATIO;
        } else {
          targetW = screenW;
          targetH = screenW / DESIGN_RATIO;
        }

        // 强行覆盖 CSS 样式
        container.style.setProperty('width', targetW + 'px', 'important');
        container.style.setProperty('height', targetH + 'px', 'important');
      }

      window.addEventListener('resize', resizeGame);
      window.addEventListener('orientationchange', () => setTimeout(resizeGame, 500));
      resizeGame(); // 初始化

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/webgl.loader.js";
      var config = {
        dataUrl: buildUrl + "/webgl.data",
        frameworkUrl: buildUrl + "/webgl.framework.js",
        codeUrl: buildUrl + "/webgl.wasm",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "Spinner Merge",
        productVersion: "1",
        // 关键：解决高 DPI 屏幕（如 iPhone）下按钮点击偏移
        devicePixelRatio: window.devicePixelRatio || 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";
          window.unityInstance = unityInstance;
          // 延迟再次刷新，确保 Unity 内部捕获了正确的尺寸
          setTimeout(resizeGame, 200);
        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);
    </script>
  </body>
</html>

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

专注于深度解决 H5 游戏开发中的各类“疑难杂症”。欢迎在下方评论区交流。

原创 温馨提示：

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

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

本文链接：

THE END