万宁五子棋 H5 小游戏 index.html 16:9 自适应适配教程 - 源码大陆

🛠️ 万宁五子棋：H5 跨端自适应适配逻辑详解

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>源码大陆 | wzq</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"/>

  <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;
    }

    /* 严格 16:9 物理容器 - 不再铺满全屏 */
    #GameDiv {
      position: relative;
      /* 核心逻辑：以宽度为基准计算高度，确保 16:9 */
      width: 100vw !important; 
      height: 56.25vw !important; /* 9 / 16 = 0.5625 */
      /* 限制最大尺寸，防止在超宽屏幕下溢出 */
      max-height: 100vh;
      max-width: 177.78vh; /* 16 / 9 = 1.7778 */
      overflow: hidden;
      background: #000;
      box-shadow: 0 0 40px rgba(0,0,0,0.8); /* 增加阴影增强窗口感 */
      border: 1px solid #333; /* 微弱边框线 */
    }

    #GameCanvas { width: 100% !important; height: 100% !important; display: block; }
    #splash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #171717; z-index: 99; }
    .progress-bar { position: absolute; left: 10%; top: 50%; width: 80%; height: 3px; border: 1px solid #444; border-radius: 5px; }
    .progress-bar span { display: block; height: 100%; background-color: #34c0e2; }
  </style>
  <link rel="stylesheet" type="text/css" href="style-mobile.25fc5.css"/>
</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 src="src/settings.92201.js" charset="utf-8"></script>
<script src="main.a2978.js" charset="utf-8"></script>

<script type="text/javascript">
(function () {
    var splash = document.getElementById('splash');
    splash.style.display = 'block';

    // 核心校准：强制引擎适配 16:9 容器尺寸
    function applyLockedResolution() {
        if (!window.cc || !cc.view) return;

        var container = document.getElementById('GameDiv');
        var w = container.clientWidth;
        var h = container.clientHeight;

        // 1. 同步物理点击区域，解决空气墙
        cc.view.setFrameSize(w, h);
        
        // 2. 模式设为 SHOW_ALL (1)，分辨率锁定为 1280x720
        cc.view.setDesignResolutionSize(1280, 720, 1); 

        // 3. 强制刷新点击映射，防止由于居中导致的坐标偏移
        if (cc.internal && cc.internal.inputManager) {
            cc.internal.inputManager._updateOffset();
        }

        if (cc.view._updateFrameSize) cc.view._updateFrameSize();
        window.dispatchEvent(new Event('resize'));
    }

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

    var debug = window._CCSettings.debug;
    loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.4ce14.js', function () {
      
      var originalBoot = window.boot;
      window.boot = function() {
          if (originalBoot) originalBoot();
          
          // 连续修正，确保覆盖引擎初始化后的默认行为
          var count = 0;
          var timer = setInterval(function() {
              applyLockedResolution();
              if (++count > 20) clearInterval(timer);
          }, 500);
      };

      if (window.CC_PHYSICS_BUILTIN || window.CC_PHYSICS_CANNON) {
        loadScript(debug ? 'physics.js' : 'physics-min.941a2.js', window.boot);
      } else {
        window.boot();
      }
    });

    window.addEventListener('resize', applyLockedResolution);
})();
</script>
</body>
</html>