屏幕适配：坐标、锚点、安全区和分辨率

依据：Cocos Creator 3.8 多分辨率、Widget 与 SafeArea 文档。环境：浏览器适配原理演示；微信真机未验证。

先分清三个尺寸

设计坐标决定你怎样摆放界面，显示尺寸决定用户看到多大，渲染缓冲区尺寸决定实际画多少像素。设备像素比会影响后者；把缓冲区放大，并不会自动让按钮的逻辑尺寸或点击区域翻倍。小游戏还要通过目标运行环境获取窗口与安全区信息，而不能直接假设 DOM API 存在。

以竖屏关卡地图为例：固定设计宽度时，较高屏幕能看见更多纵向地图；完整显示策略可能留下空白；铺满策略可能裁掉左右或上下内容。画面没有黑边和所有内容都可见是两个不同目标，需要设计取舍。

背景允许超出边界，关卡内容有自己的可滚动区域，操作按钮对齐安全区。不要把全部内容按同一个比例硬缩放。背景被裁切可能无妨，但关闭按钮或奖励入口被裁掉会让流程无法继续。

锚点表示节点内部的基准位置，布局约束表示节点与父容器的关系。左上角按钮通常跟随父容器的左上边缘，而不是把设计稿上的绝对坐标原样搬到所有屏幕。Cocos 的 Widget 可以建立这种关系；若持续对齐，它也会控制对应位置或尺寸，程序动画应避免与它争用同一属性。

屏幕点击点先扣除画布在显示区域中的偏移，再除以显示缩放，得到设计坐标；还可能需要经过相机与父节点逆变换才能得到某个节点的本地坐标。不能只用触摸的屏幕横坐标去与本地按钮位置比较。旋转和缩放嵌套时，使用引擎提供的转换接口比手写减法可靠。

打开屏幕适配实验台，依次切换屏幕比例、安全区和适配策略。检查地图节点是否仍可见、顶部按钮是否被遮挡、触摸目标是否跟随视觉位置。

为了“塞进所有内容”而整体等比缩小，会降低文字和点击目标的可读性。更好的做法可能是让内容滚动、重新安排列数、给装饰背景增加延展区域。横竖屏都支持时，应准备明确的布局规则，而不是寄希望于统一缩放解决所有问题。

至少覆盖窄长屏、较宽屏、横屏及安全区变化；同时观察文本换行、弹窗最大宽度、滚动边界和坐标命中。站内模拟器帮助暴露规则问题，最终仍需目标机和真实微信环境验证。地图案例见关卡地图，输入细节见输入与交互。

资料核查日期：2026-10-30。文中的案例参数与图解用于教学；目标项目应按所用版本及平台重新验证。