生存冒险记H5关卡显示修正 - Cocos Creator UI 适配方案 - 源码大陆

生存冒险记 (关卡显示修正版)

本方案由源码大陆提供：核心解决 Cocos Creator 引擎在 9:16 环境下底部 UI 被截断或遮挡的问题。

修复重点
UI 坐标偏移

开发引擎：Cocos Creator
核心逻辑：DesignResolution 动态修正

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

方案原理： 针对 720×1280 原始比例在全面屏下底边丢失的问题，强制将设计分辨率高度推至 1360，利用溢出补偿将 UI 整体上移。
点击精准度： 修改设计分辨率后同步调用 setFrameSize，防止因视觉偏移导致的 Canvas 物理碰撞区域与渲染层不匹配。
执行时机： 采用 setInterval 定时检测机制，确保在引擎初始化并加载完 index.js 后依然能强制覆盖默认适配策略。
防回弹处理： 监听浏览器 resize 事件，防止手机端虚拟键盘弹出或横竖屏切换时导致 UI 再次错位。

<!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,minimal-ui=true,viewport-fit=cover"/>
  <style>
    html, body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #000; overflow: hidden; display: flex; justify-content: center; align-items: center; }
    #GameDiv { position: relative; width: 56.25vh; height: 100vh; max-width: 100vw; max-height: 177.78vw; overflow: hidden; }
    #Cocos3dGameContainer, #GameCanvas { width: 100% !important; height: 100% !important; }
  </style>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
  <div id="GameDiv">
    <div id="Cocos3dGameContainer">
      <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
    </div>
  </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>
    function fixLevelDisplay() {
        if (!window.cc) return;

        var view = cc.view || (cc.internal ? cc.internal.view : null);
        if (view) {
            var container = document.getElementById('GameDiv');
            var w = container.clientWidth;
            var h = container.clientHeight;

            // 1. 保持物理对齐确保点击精准
            view.setFrameSize(w, h);
            
            // 2. 核心调整：稍微增加设计分辨率的高度（从 1280 改为 1360）
            // 这样做会把原本紧贴底部的 UI 往上推一点，关卡条就会露出来
            view.setDesignResolutionSize(720, 1360, 2); 

            window.dispatchEvent(new Event('resize'));
        }
    }

    System.import('./index.js').then(function() {
        var count = 0;
        var timer = setInterval(function() {
            fixLevelDisplay();
            if (++count > 15) clearInterval(timer);
        }, 500);
    });

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

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

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

原创 温馨提示：

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

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

本文链接：

THE END