功能全跑通了。UI 看着挺顺眼。

拿自己手机试了又试。

完美。

「打包。发开发群。」

群里各种手机用户都有。

iPhone。华为。小米。OPPO。

还有几年前的旧机器。

两分钟后。

截图。像雪片一样飞过来。

第一张。小屏手机。

游戏主界面——按钮呢？

哦。被挤出屏幕了。只剩左边半个。

第二张。大屏全面屏。

画面被拉得又扁又宽。角色头像变成了椭圆。

像照了哈哈镜。

第三张。刘海屏。

得分按钮刚好被刘海挡住一半。

同事点不到。在群里问——

「这游戏咋开始啊？」

我回了一个字：

「……」

然后。默默打开代码。

原来适配这件事，不是我一个人的事。

是每一款游戏。都要过的鬼门关。

坑一：小屏手机——按钮被挤到屏幕外面去了

6.7 英寸 vs 4.0 英寸。400px 弹窗 vs 320px 屏幕。

我的测试机——iPhone 14 Pro Max。6.7 英寸。

写 UI 的时候。所有坐标按这个屏幕调的。

按钮间距。角色位置。文字大小。全部刚刚好。

然后我把游戏发到一个用 iPhone SE（4.0 英寸）的群友手机上。

结果——

「开始游戏」按钮：只露出左半边。右边在屏幕外面。

生命值图标：完全看不见。

结算弹窗：宽到溢出屏幕。底部按钮根本点不到。

我想不通。

「我的代码写的是居中啊。为什么还会被切？」

后来发现。问题出在固定尺寸上。

我用像素坐标定位 UI。

Canvas 是 414 x 896。

小屏手机屏幕宽度——320。

一个 400 像素宽的弹窗。放在 320 像素宽的屏幕上。

右边 80 像素。直接喂给屏幕边框。

解决方案很简单：用百分比定位。不用固定像素。

「按钮距离屏幕左边 200 像素」→「按钮距离屏幕左边 50%」。

但我花了一整个晚上。

把全部 UI 代码翻了一遍。

那天晚上学会了两个新词——

responsive。

flexible。

坑二：大屏手机——画面被拉成宽银幕了

21:9 超宽屏。角色变椭圆。像被卡车碾过。

解决完小屏。我心想——大的总没问题吧？

屏幕越大。不是看得越清楚？

朋友发来一段录屏。

他的手机。超宽全面屏。比例 21:9。

游戏打开。

画面被横向拉伸。

角色变成了椭圆。头大身子扁。

像被卡车碾过。

我以为是图片问题。

「我的图是标准比例啊。不应该变形。」

然后发现——canvas 被拉伸了。

Canvas 是按固定宽高比写的。

但超宽屏上。微信小游戏的 canvas 默认填充整个屏幕宽度。

屏幕比例和 canvas 比例不一样——

画面。拉伸。

解决方式——

用 fit 模式。

canvas 保持比例居中。上下左右留黑边。

做背景填充。

黑边不好看。加一张可拉伸渐变背景。

适配不同比例。

预设 16:9、18:9、19.5:9、21:9。每种单独调 UI。

听起来不复杂对吧？

我调了三个晚上。

每个比例的 UI 都要单独微调。

按钮不能太靠边——曲面屏会弯掉。

文字不能太大——黑边里装不下。

做做停停。一边改一边骂自己。

「当初为什么要做游戏？做 B 端多好……用户都是电脑。一个分辨率。」

但改完以后。看着各种屏幕都能正常显示了——

还挺有成就感。

坑三：刘海屏和挖孔屏——关键按钮被头发挡住了

「开始游戏」只剩「始游戏」。手机颜值调查报告。

这是最隐蔽的一个坑。

我自己手机。没有刘海。所以完全没想过这个问题。

群友发来截图。刘海屏。

游戏开始界面——「开始游戏」按钮。正中间。

刚好被刘海挡住。

不是完全挡住。是刘海的边缘切到了按钮上半。

只露出下半截。

文字只看得见「始游戏」。

「开始」两个字的上面一半。

被刘海吃了。

我一开始想——把按钮往下挪。

但往下一挪。在小屏手机就超出底部了。

然后我开始研究一个概念：安全区域（Safe Area）。

安全区域就是——屏幕可视区域。减去刘海、挖孔、圆角。

系统告诉你「哪些区域是安全的，不会被遮」。

我重新写了 UI 定位——

主要按钮：安全区域中心。

顶部状态栏：安全区域顶部。避开刘海。

底部交互区：安全区域底部。不低于底部边界。

听起来简单。

涉及几个变量的联动判断——

有没有刘海？刘海多高？底部 Home Indicator？圆角多大？

代码里加了一堆判断。

像在写手机颜值调查报告：

「此机有刘海。顶部安全区 44pt。」

「此机有挖孔。顶部安全区 36pt。」

「此机无刘海。顶部安全区 20pt。」

改完。同一个按钮。三款手机。各出现在不同位置。

但都在可视区域内。

我突然理解了。为什么大厂的 UI 组件库这么多行代码。

不是他们想写复杂。

是真有这么多破事。

结尾

现在回头看。

适配这件事。做之前觉得无所谓。

做之后发现——无底洞。

小屏。大屏。刘海。挖孔。曲面。圆角。

每个坑都不深。

连在一起。能淹死你好几个晚上。

但有什么办法呢。

做都做了。

总不能因为用户手机长得不一样。就不让人家玩吧？

所以继续改。一个一个调。一个一个测。

又解锁了一个新的知识盲区。

你玩小游戏的时候，有没有遇过界面错位的情况？

按钮点不到、文字被截断、画面被拉伸——来评论区说说你遇到过最离谱的适配问题。

转给你那个也在做小游戏的朋友。让他少踩一个坑。