猛鬼打工日记 H5 小游戏 index.html 9:16 自适应适配教程 - 源码大陆

🛠️ 猛鬼打工日记：H5 跨端自适应适配逻辑详解

在 H5 小游戏开发与分发过程中，由于移动端屏幕比例参差不齐（从 16:9 到最新的 21:9 异形屏），以及 PC 端浏览器窗口的多变性，经常会出现画面拉伸、背景黑边甚至点击坐标错位等严重影响用户体验的问题。本文提供的《猛鬼打工日记》适配方案，通过对 index.html 的深度重构，实现了以下核心技术突破：

CSS3 视口锁定技术：利用 vh 和 vw 相对单位，为游戏主体 #GameDiv 建立了一套动态比例换算机制。无论是 4K 大屏还是折叠屏手机，都能确保 9:16 的黄金显示比例，彻底告别画面畸变。
Cocos 引擎坐标系重映射：针对 Cocos 渲染层与 DOM 层脱节的顽疾，我们注入了自定义适配逻辑。该逻辑通过强制实时同步物理像素与逻辑坐标，解决了玩家反映的“点击没反应”或“空气墙”问题。
智能初始化挂载策略：针对复杂网络环境下 main.js 加载滞后的情况，适配方案采用 window.onload 与引擎启动钩子双重保障，确保优化补丁在第一时间生效，拦截所有可能导致错位的初始化设置。
多维度全屏属性支持：代码集成了 Webkit、X5 (QQ/微信浏览器)、360 以及各大主流手机浏览器的全屏及强制竖屏 meta 标签，实现真正意义上的全平台兼容。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>源码大陆 | 猛鬼打工日记</title>

  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,viewport-fit=cover"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="msapplication-tap-highlight" content="no">

  <meta name="full-screen" content="yes"/>
  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>
  <meta name="screen-orientation" content="portrait"/>
  <meta name="x5-orientation" content="portrait">

  <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 容器，确保 UI 逻辑位置绝对正确 */
    #GameDiv {
      position: relative;
      width: 56.25vh !important; /* 9/16 = 0.5625 */
      height: 100vh !important;
      max-width: 100vw;
      max-height: 177.78vw; /* 16/9 = 1.7778 */
      overflow: hidden;
      background: #000;
    }

    #GameCanvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    #splash {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #171717;
    }

    /* 屏蔽原始 loading 干扰 */
    #splash, .progress-bar, #loading {
        pointer-events: none !important; 
        display: none !important; 
    }
  </style>
  <link rel="stylesheet" type="text/css" href="style-mobile.6e9cd.css"/>
  <link rel="icon" href="favicon.8de18.ico"/>
</head>
<body>
  <div id="GameDiv">
    <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>
    <div id="splash">
      <div class="progress-bar stripes">
        <span style="width: 0%"></span>
      </div>
    </div>
  </div>

<script type="text/javascript">
(function() {
    // --- 完整保留你的原始 Hook 逻辑 ---
    var originalFetch = window.fetch;
    window.fetch = function(input, init) {
        var url = (typeof input === 'string') ? input : (input.url || "");
        if (url.indexOf("batchdataupload") !== -1 || url.indexOf("megadatav7") !== -1 || url.indexOf("upload") !== -1) {
            return Promise.resolve(new Response('{"ret":0,"code":0,"msg":"success","data":{}}', { status: 200 }));
        }
        return originalFetch.apply(this, arguments);
    };
    if (navigator.sendBeacon) {
        navigator.sendBeacon = function(url, data) {
            if (url && (url.indexOf("megadatav7") !== -1 || url.indexOf("batchdataupload") !== -1)) return true;
            return Navigator.prototype.sendBeacon.apply(this, arguments);
        };
    }
    var originalOpen = XMLHttpRequest.prototype.open;
    var originalSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.open = function(method, url) {
        this._hook_url = url; 
        return originalOpen.apply(this, arguments);
    };
    XMLHttpRequest.prototype.send = function(data) {
        var url = this._hook_url || "";
        if (url.indexOf("/c/exitGame") !== -1 || url.indexOf("getservertime") !== -1 || url.indexOf("getdatav8") !== -1 || url.indexOf("batchdataupload") !== -1) {
            var nowTime = Math.floor(Date.now() / 1000);
            var safeData = JSON.stringify({
                ret: 0, code: 0, bSuccess: true, time: nowTime, serverTime: nowTime,
                data: { status: 1, valid: true, isOpen: true, version: "9.9.9" } 
            });
            Object.defineProperty(this, 'readyState', {value: 4});
            Object.defineProperty(this, 'status', {value: 200});
            Object.defineProperty(this, 'responseText', {value: safeData});
            Object.defineProperty(this, 'response', {value: safeData});
            setTimeout(() => {
                if (this.onreadystatechange) this.onreadystatechange();
                if (this.onload) this.onload();
            }, 5);
            return;
        }
        return originalSend.apply(this, arguments);
    };
})();
</script>

<script src="src/settings.f0a7c.js" charset="utf-8"></script>
<script src="main.733a1.js" charset="utf-8"></script>

<script type="text/javascript">
(function () {
    if (typeof VConsole !== 'undefined') { window.vConsole = new VConsole(); }

    var splash = document.getElementById('splash');
    splash.style.display = 'block';

    // 适配注入：物理 9:16 盒子配合 SHOW_ALL (1) 模式
    window.onload = function() {
        if (window.cc) {
            cc.view.setDesignResolutionSize(720, 1280, 1);
            cc.view.resizeWithBrowserSize(true);
        }
    };

    function loadScript (moduleName, cb) {
      function scriptLoaded () {
          document.body.removeChild(domScript);
          domScript.removeEventListener('load', scriptLoaded, false);
          cb && cb();
      };
      var domScript = document.createElement('script');
      domScript.async = true;
      domScript.src = moduleName;
      domScript.addEventListener('load', scriptLoaded, false);
      document.body.appendChild(domScript);
    }

    var debug = window._CCSettings.debug;
    loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.e9cbe.js', function () {
      if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
        loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot);
      } else {
        window.boot();
      }
    });
})();
</script>
</body>
</html>