ゲームが実際に使う要素を監視する
canvas のコンテナーがウィンドウとは別にサイズ変更される場合（分割パネル内や、操作部が変化するページなど）は ResizeObserver を使います。コンテンツサイズを読み取り、実際に異なる場合だけ canvas の内部解像度を更新し、CSS 座標とゲーム内座標の変換倍率を再計算します。
レイアウトに影響する寸法を、条件なしに同じ監視対象要素へ書き戻さないでください。MDN によると、オブザーバーのコールバック内でサイズを変更するとループが起こる場合があります。処理を慎重にスケジュールし、想定サイズに変化がなければ書き込みを省きます。画像を変形させず余白を付ける設計なら、ゲームの表示領域と固定されたワールド座標系を分けてください。
レイアウトと入力をまとめてテストする
狭い画面、広い画面、端末を回転させた画面で、canvas の各端に近い対象をクリックまたはタップし、ゲームが表示上の印と同じワールド座標を認識するか確認します。レベルのプレイ中にもサイズを変え、カメラや余白の方針が適用されても位置が予期せず変わらないことを確かめます。
window.innerWidth だけですべてのレイアウト変更を検知できると思わず、コンテナーを監視してください。モバイルキーボードやブラウザーの操作部で使用可能な領域が変わる場合は、プレイ領域を縮小するか、固定するか、スクロール可能にするか決めます。操作部がゲームに必要な領域を使うこともあるため、操作部を表示した状態でその方針をテストしてください。
ブラウザーゲームのサイズ変更処理についての質問
サイズ変更のたびにゲーム世界の大きさも変えるべきですか？
いいえ。多くのゲームはワールド座標を固定し、カメラだけを変えるか余白を加えます。ワールド自体の大きさを変えると、難易度、当たり判定、レベル構成に影響することがあります。
window の resize ハンドラーより ResizeObserver が適しているのはどんな場合ですか？
ウィンドウ全体の寸法が変わらなくても、コンテナーや周囲のレイアウトによって対象要素のサイズが変わる場合は ResizeObserver を使います。
関連情報
古い情報を見つけましたか？ 訂正を連絡