测量容器并选择秤
使用游戏容器的尺寸，而不是假设窗口是可玩区域。 ResizeObserver 可以报告该元素何时发生变化，包括由周围布局而不是视口调整大小引起的变化。决定游戏是否应该以窄长宽比进行信箱、裁剪或重排，并使选择可见，而不是将圆形拉伸成椭圆形。
对于固定的虚拟游戏场，计算一个适合其宽度和高度的比例因子，然后将剩余空间居中。在命中测试之前通过相同变换的逆转换指针坐标。对于回流游戏，一起更新布局锚点和碰撞形状，以便控件不会继续使用以前大小的位置。
保持在模拟循环之外调整大小
以稳定的单位存储游戏世界，并将画布背景分辨率、CSS 大小和设备像素比视为渲染问题。当尺寸改变时，更新绘图表面并重新绘制；除非游戏规则要求，否则不要重置关卡或重新计算对象状态。这种分离可以防止工具栏调整大小看起来像重新启动。
在游戏运行时测试窄视口和宽视口、桌面大小调整和方向变化。检查文本换行、触摸目标位置和坐标转换。 MDN 的 ResizeObserver 指南解释了观察元素尺寸，并警告更改回调内观察到的大小可能会产生循环。
关于浏览器游戏响应式布局的常见问题
当画布大小改变时，我应该调整游戏世界的大小吗？
通常保持模拟坐标稳定并调整演示或布局。如果设计有意更改游戏场地，请一起更新其规则、对象和输入映射。
为什么使用 ResizeObserver 而不是仅调整窗口大小？
游戏容器可以由于周围布局而改变大小，而无需调整窗口大小。 ResizeObserver 直接报告元素尺寸变化。
延伸阅读
发现信息过时了？ 报告需要更正的内容