观察游戏实际使用的元素
当画布容器可能独立于窗口改变大小时（例如位于分栏面板中，或页面控件会变化），请使用 ResizeObserver。读取内容区域的尺寸；只有尺寸确实变化时才更新画布的内部绘图尺寸；然后重新计算 CSS 坐标与游戏世界坐标之间的缩放比例。
不要在没有条件判断的情况下，把影响布局的尺寸写回同一个被观察元素。MDN 提醒，在观察器回调中调整尺寸可能造成循环；应谨慎安排工作，并在预期尺寸未变时跳过写入。如果设计应通过留边适配而不是拉伸变形，请让游戏视口与固定的世界坐标系分开。
将布局和输入作为一项行为一起测试
在窄屏、宽屏和旋转屏幕下，点击或轻触画布每条边缘附近的目标，检查游戏识别的世界坐标是否与可见标记一致。在关卡进行中调整尺寸，确认相机或留边策略生效，同时位置不会意外改变。
应观察容器，而不要假设 window.innerWidth 能捕捉所有布局变化。如果移动键盘或浏览器界面改变了可用空间，请决定游戏区域应缩小、保持固定还是允许滚动。控件可能占用游戏所需空间，因此要在控件可见时测试这一选择。
关于浏览器游戏尺寸变化处理的常见问题
每次调整尺寸都应该改变游戏世界的大小吗？
不应该。许多游戏会保留固定的世界坐标，只调整相机或增加留边。改变世界本身的大小可能影响难度、碰撞和关卡构成。
什么情况下 ResizeObserver 比窗口 resize 处理程序更合适？
如果相关元素会因容器或周围布局而改变大小，即使整个窗口尺寸不变，也应使用 ResizeObserver。
延伸阅读
发现信息过时了？ 报告需要更正的内容