【界面UI】Cocos2d-x 屏幕适配：designResolution 三种策略与刘海屏实测

实战应用：用在哪里

同一份 996 客户端要跑在 16:9 的 PC 窗口、20:9 的安卓全面屏、带刘海的 iPhone 上，UI 不能错位、按钮不能被刘海遮住。屏幕适配策略在 App 启动的第一帧就生效，选错策略的代价是全项目 UI 重排。适用于新项目立项定策略、老项目排查"按钮顶到刘海"。

三种策略的取舍

-- GLViewImpl 设计分辨率设置（Cocos2d-x 3.x）
glView:setDesignResolutionSize(1136, 640, cc.ResolutionPolicy.FIXED_HEIGHT)

三种策略的实测差异：FIXED_HEIGHT（高度铺满、宽度自适应）适合横版游戏，宽屏设备左右多出的区域用背景延伸；FIXED_WIDTH（宽度铺满）适合竖屏卡牌；EXACT_FIT 拉伸变形，禁用。996 横版客户端选 FIXED_HEIGHT，设计基准 1136x640，超宽屏幕两侧用九宫格背景补足。

刘海屏与安全区

全面屏的刘海与手势条会遮挡边缘控件。解法分两层：引擎层开启 setDisplayStats(false) 之外的性能无关接口后，读取系统安全区（iOS 用 safeAreaInsets，Android 用 cutout 排除区），把安全区边距写入全局表；UI 层所有顶边控件（时间、按钮）的布局 y 坐标统一加上安全区偏移。实测 iPhone 14 系列顶部偏移 47 像素，安卓挖孔屏 24~36 像素不等——写死一个数值必然翻车，必须运行时读取。

适配验收清单

三机型各过一遍：16:9 PC 窗口拖拽缩放（UI 跟随重排不变形）；20:9 安卓全面屏（两侧背景延伸自然）；带刘海 iPhone（顶部控件下移进安全区）。再加一条极端测试：把窗口缩到 4:3 老比例，验证按钮仍可点击、文字不重叠。适配问题在开发机上看不见，必须在真机矩阵上过一遍——模拟器永远"看起来没问题"。

适配相关的一组数值基准供对照：设计基准 1136x640 时，控件布局全部以 640 高为纵轴基准，超宽屏幕只扩展横向；字体最小 22 像素（640 高基准下）保证小屏可读。三机型验收之外加一条遥控器测试（电视盒渠道）：方向键焦点顺序要符合视觉顺序，适配问题在按键操作下暴露得比触摸更快。

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付，内容以官方知识库与真实项目为出处，按版本持续修订。