机战突围 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 lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>源码大陆 | H5游戏</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, 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="x5-page-mode" content="app">

  <style>
    /* 保证页面物理尺寸正确 */
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
      /* 强制触控区域同步 */
      touch-action: none;
    }

    #GameDiv, #Cocos3dGameContainer, #GameCanvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      outline: none;
    }

    .more-games-btn {
      position: fixed;
      top: 15px;
      right: 15px;
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      border-radius: 50%;
      text-decoration: none;
      z-index: 9999;
      border: 1px solid rgba(255,255,255,0.2);
    }
  </style>
</head>

<body>
  <div id="GameDiv">
    <div id="Cocos3dGameContainer">
      <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
    </div>
    <a href="https://www.yuanmadalu.com" class="more-games-btn" target="_blank">🎮</a>
  </div>

  <script src="src/polyfills.bundle.js" charset="utf-8"></script>
  <script src="src/system.bundle.js" charset="utf-8"></script>
  <script src="src/import-map.json" type="systemjs-importmap" charset="utf-8"></script>
  
  <script>
    System.import('./index.js').then(function() {
        // 修改点 2：使用更频繁的检测，确保在隐私政策弹出前拦截布局
        var fixCount = 0;
        var tryFixLayout = setInterval(function() {
            if (window.cc && cc.view) {
                // 强制锁定 720p，并使用 FIXED_HEIGHT (模式 2) 
                // 这样能确保在长屏手机上，底部的“确定”按钮不会被顶出屏幕
                cc.view.setDesignResolutionSize(720, 1280, 2); 
                cc.view.resizeWithBrowserSize(true);
                
                // 强制刷新所有 UI 节点的对齐方式
                if (cc.director && cc.director.getScene()) {
                    var scene = cc.director.getScene();
                    // 通知 3.x 引擎重新计算窗口边界
                    window.dispatchEvent(new Event('resize'));
                }

                fixCount++;
                // 持续监控 3 秒，防止隐私政策弹出时再次错位
                if (fixCount > 30) {
                    clearInterval(tryFixLayout);
                }
            }
        }, 100);

    }).catch(function(err) { 
        console.error(err); 
    });
  </script>
</body>
</html>