竖屏适配、安全区与坐标
设计文件中的 390 × 844 是一个基准场景。真实微信设备的窗口、安全区、胶囊和像素比不同，交付时要表达变化规则。
区分四类尺寸
| 名称 | 用来决定什么 |
|---|---|
| Figma 设计单位 | 描述基准布局、比例与组件规格 |
| 运行时逻辑坐标 | 绘制位置、布局计算和触控命中 |
| Canvas backing store 像素 | 画布实际像素精度 |
| 素材像素 | 纹理清晰度与内存成本 |
不要直接把截图中的物理像素位置写成触控坐标。选择引擎后，统一由适配层处理设计坐标、窗口坐标和像素比；避免手写一遍 DPR 换算，引擎又乘一遍。
安全区与胶囊
运行时可读取 wx.getWindowInfo() 的窗口、pixelRatio 和 safeArea。官方说明 safeArea 可能缺失，且按竖屏正方向定义。胶囊位置由 wx.getMenuButtonBoundingClientRect() 获取。
在 Figma 中画出安全留白是设计意图；开发不能把这张屏幕顶部的固定空白当成所有机型的胶囊位置。交付要写明取值来源、缺失时的回退，以及窗口变化后是否重新计算。
三个必测布局场景
- 窄屏：棋盘是否越界，按钮和数字是否挤压。
- 高屏：新增高度放在哪里，棋盘是否仍居中于合理区域。
- 短屏：是否需要缩小棋盘、压缩次要间距或使用滚动；游戏主区域应避免无意滚动。
教学中可以复制基准屏幕作布局测试。复制后标注测试尺寸和结论，不要让这些测试帧混入主原型流程。
请建立 360、390、430 三种宽度的布局测试帧。
说明哪些值固定、哪些随可用宽度计算，记录棋盘边界与卡牌最小尺寸。
安全区和胶囊标记为运行时输入，不把当前截图坐标当全设备常量。
如果某宽度无法满足三列布局，先报告冲突并提出可比较的方案。
实际适配样例
figma-demo 的适配 Section 中有 360、390、430 三个宽度测试帧。卡牌宽使用 min(98, (width - 96) / 3)，高度按 112/98 保持比例。窄屏缩小卡牌，宽屏保留基准最大尺寸并居中。
这些样例验证给定宽度下的静态布局，不代表所有设备都满足触摸体验；更窄窗口仍需重新确定最低条件。
触控验收
Touch 的 clientX/clientY 基于可见视区。命中计算还要考虑画布缩放、偏移、当前动画和输入锁。设计交付应同时标出视觉矩形与可点击矩形，说明拖出、取消和快速连点时的行为。
练习与检查
给棋盘写一个宽度公式，并用三种窗口宽度计算结果。把安全区标为变量输入；把基准设计中的 24 留白标为设计选择。能够区分两者，就不会把设计常量误当系统数据。