末日大逃亡H5适配修正 - Cocos Creator UI对齐与全屏重绘方案 - 源码大陆

末日大逃亡 (UI 布局强化版)

本方案由源码大陆优化：通过 JS 强制干预引擎底层的 Viewport 计算，彻底解决横竖屏切换时 UI 无法自动对齐的顽疾。

修复重点
自动重绘

适配模式：SHOW_ALL (防裁切)
兼容核心：WebKit / X5 / Safari

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

SHOW_ALL 物理锁定： 逃亡类游戏 UI 繁多，采用铺满模式（EXACT_FIT）会导致画面比例扭曲。代码强制启用 SHOW_ALL，确保操作按键不会因屏幕太长而被“藏”在刘海区。
Widget 递归更新： 针对 Cocos Creator 加载场景后 UI 偶尔对齐失败的问题，方案实现了 updateAlignment 自动巡检，强制让场景内所有 Widget 组件按当前窗口重新布局。
Viewport-fit 优化： meta 标签中注入了 viewport-fit=cover，专门应对 iPhone 端的底部安全区，配合 100vw/vh 的 CSS 锁定，实现全屏无死角覆盖。

多轮执行刷新： 由于物理引擎加载（Physics）可能阻塞布局初始化，方案在 boot 后设置了 100ms 和 1000ms 两轮强制重绘，确保复杂环境下布局依然精准。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cocos Creator | 源码大陆</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"/>
  
  <link rel="stylesheet" type="text/css" href="style-mobile.6e9cd.css"/>
  <link rel="icon" href="favicon.8de18.ico"/>

  <style>
    html, body {
      margin: 0 !important;
      padding: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background-color: #000 !important;
      overflow: hidden !important;
    }

    /* 移除所有比例锁定，强制撑满 */
    #GameCanvas {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      touch-action: none !important;
    }

    #splash {
      background-color: #171717 !important;
    }
  </style>
</head>
<body>
  <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas>

  <div id="splash">
    <div class="progress-bar stripes">
      <span style="width: 0%"></span>
    </div>
  </div>

<script src="src/settings.ddf12.js" charset="utf-8"></script>
<script src="main.73550.js" charset="utf-8"></script>

<script type="text/javascript">
(function () {
    function refreshLayout() {
        var w = window.innerWidth;
        var h = window.innerHeight;

        if (window.cc && cc.view) {
            // 1. 设置引擎感知到的物理框架大小为当前窗口大小
            cc.view.setFrameSize(w, h);
            
            /** * 2. 核心适配策略切换：
             * 如果 UI 显示不全，通常是因为选错了适配模式。
             * - SHOW_ALL: 保证内容全部显示，但会有黑边。
             * - EXACT_FIT: 强制铺满，画面可能拉伸（不推荐）。
             * - FIXED_HEIGHT: 适配高度，宽度自由伸缩。
             * 这里我们采用 SHOW_ALL 确保 UI 绝对完整。
             */
            cc.view.setResolutionPolicy(cc.ResolutionPolicy.SHOW_ALL);
            
            // 3. 强制对齐 UI
            if (cc.director) {
                var scene = cc.director.getScene();
                if (scene) {
                    // 遍历所有含有 Widget 组件的节点并强制更新
                    var widgets = scene.getComponentsInChildren(cc.Widget);
                    if (widgets) {
                        widgets.forEach(function(w) { w.updateAlignment(); });
                    }
                }
            }
        }
    }

    // 监听各种状态变化
    window.addEventListener('resize', refreshLayout);
    window.addEventListener('orientationchange', () => setTimeout(refreshLayout, 500));
    window.addEventListener('load', refreshLayout);

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

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

    loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.e4a12.js', function () {
      if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) {
        loadScript(debug ? 'physics.js' : 'physics-min.js', function() {
            window.boot();
            // 加载完后多轮强制刷新，确保 UI 布局跟上
            setTimeout(refreshLayout, 100);
            setTimeout(refreshLayout, 1000);
        });
      }
      else {
        window.boot();
        setTimeout(refreshLayout, 100);
        setTimeout(refreshLayout, 1000);
      }
    });
})();
</script>
</body>
</html>

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

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

原创 温馨提示：

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

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

本文链接：

THE END