# 将尺寸变化作为受控的布局转换处理

> 玩家调整窗口大小或改变方向时，让游戏坐标、画布尺寸和布局保持同步。

- URL: https://oneshotgems.ai/zh-Hans/topics/game-resize-handling
- 类别: 游戏开发者指南
- 类型: 指南
- 更新日期: 2026年10月5日

窗口变化、设备旋转、浏览器控件出现或页面布局改变时，浏览器游戏的显示尺寸都可能变化。如果只调整画布大小，却没有更新内部绘图缓冲区和输入坐标映射，画面就可能被拉伸，点击位置也会偏移。应将尺寸视为布局和渲染的输入，并一并更新依赖它的系统。调整尺寸不应重置游戏进度，也不应因细微的测量波动而反复触发高开销工作。

## 观察游戏实际使用的元素

当画布容器可能独立于窗口改变大小时（例如位于分栏面板中，或页面控件会变化），请使用 ResizeObserver。读取内容区域的尺寸；只有尺寸确实变化时才更新画布的内部绘图尺寸；然后重新计算 CSS 坐标与游戏世界坐标之间的缩放比例。

不要在没有条件判断的情况下，把影响布局的尺寸写回同一个被观察元素。MDN 提醒，在观察器回调中调整尺寸可能造成循环；应谨慎安排工作，并在预期尺寸未变时跳过写入。如果设计应通过留边适配而不是拉伸变形，请让游戏视口与固定的世界坐标系分开。

## 将布局和输入作为一项行为一起测试

在窄屏、宽屏和旋转屏幕下，点击或轻触画布每条边缘附近的目标，检查游戏识别的世界坐标是否与可见标记一致。在关卡进行中调整尺寸，确认相机或留边策略生效，同时位置不会意外改变。

应观察容器，而不要假设 window.innerWidth 能捕捉所有布局变化。如果移动键盘或浏览器界面改变了可用空间，请决定游戏区域应缩小、保持固定还是允许滚动。控件可能占用游戏所需空间，因此要在控件可见时测试这一选择。

## 常见问题

**每次调整尺寸都应该改变游戏世界的大小吗？** 不应该。许多游戏会保留固定的世界坐标，只调整相机或增加留边。改变世界本身的大小可能影响难度、碰撞和关卡构成。

**什么情况下 ResizeObserver 比窗口 resize 处理程序更合适？** 如果相关元素会因容器或周围布局而改变大小，即使整个窗口尺寸不变，也应使用 ResizeObserver。

## 跟随好奇心探索

- [设置 Canvas 分辨率，让游戏画面更清晰](https://oneshotgems.ai/zh-Hans/topics/canvas-pixel-density): 当游戏必须在屏幕上看起来清晰时，平衡画布背景分辨率、设备像素比、内存使用和绘图成本。
- [查找画布渲染瓶颈](https://oneshotgems.ai/zh-Hans/topics/canvas-game-performance): 使用可重复的场景分析 2D Canvas 游戏，测量耗时分布后再减少高成本的绘制工作。

## 延伸阅读

- [MDN：ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

---
规范页面: https://oneshotgems.ai/zh-Hans/topics/game-resize-handling