屏幕适配：设计分辨率和安全区域
你按 720 × 1280 摆好界面，不代表每台手机都有同样比例。适配首先是一个产品决定：画面可以多露出什么，哪些控件必须一直可见？
三个区域不要混淆
设计分辨率定义你布局时使用的坐标参考；实际窗口由设备和运行环境决定；安全区域避开刘海、圆角和底部系统区域。放大背景可以覆盖屏幕，却不代表按钮也处于安全区域。
先选一种明确的策略
竖屏点击收集案例可采用固定宽度的思路：保持棋盘或目标区域宽度，较长屏幕提供额外上下空间；HUD 和按钮锚定到安全区域。横屏动作游戏可能采用另一套策略。
Creator Canvas 的 Fit Width / Fit Height 等设置会影响适配。两者同时启用也不意味着所有元素都自动满足产品目标。先用几个极端宽高比观察结果，再定策略。
实操顺序
- 固定设计分辨率，不要遇到一个机型就修改整个项目的参考尺寸。
- 把背景、核心玩法区、HUD、弹窗分层。
- 背景允许裁切；重要玩法对象留在可见核心区。
- HUD 采用 Widget 等组件对齐，并使用 SafeArea 或平台信息校验安全边距。
- 文字与可点击区域分别检查，防止“字可见，按钮不可点”。
测试矩阵
| 情况 | 观察重点 |
|---|---|
| 常见竖屏比例 | 主要布局是否符合设计 |
| 很长的屏幕 | 上下空白怎样处理，背景是否露底 |
| 较矮或较宽的窗口 | 内容是否被裁切，结算按钮是否仍可见 |
| 刘海和底部系统区域 | 关键信息与点击区是否避开 |
| 运行中尺寸变化 | 如支持旋转/窗口变化，布局是否重新计算 |
浏览器改变窗口能暴露布局问题，真机才能确认触摸区域与平台安全区是否符合预期。
给 AI：“设计分辨率 720×1280，竖屏；背景可裁切，玩法核心区不可裁切，HUD 与重开按钮保持安全边距。请说明宽高变化时的布局规则，给出三种比例下的验收点。”