A resized canvas can look correct while its controls still use the old dimensions. It can also keep sharp artwork by allocating far more pixels than the device needs. Test layout, rendering, and input together. This checklist uses a tile-placement game embedded beside a collapsible portal sidebar: the available space changes even when the browser window itself stays the same size.
/01
Choose what resizing is allowed to change
Write down whether the game fits a fixed playfield, reveals more of the world, or rearranges its interface. For the tile game, suppose the board must keep its square shape while the toolbar can move below it. Mark the minimum usable board area and decide how the game explains unsupported space. Those choices provide a stable reference for testing instead of judging each screenshot by intuition.
Identify the element that actually owns the available size. MDN describes ResizeObserver as reporting changes to an element's dimensions, which is useful when an embedded panel changes independently of the window. Observe the correct container and record the size your layout consumed. Keep the measurement and the resulting layout visible in a development overlay so a mismatch can be reproduced.
/02
Separate display size from rendering resolution
Keep three concepts explicit: the canvas's displayed rectangle, the resolution of its drawing surface, and the game's logical coordinate system. MDN documents devicePixelRatio as the relationship between physical and CSS pixels. That value informs rendering choices, but it does not define the dimensions of a game board or the number of tiles the player should see.
For example, a logical board that is 800 units wide may display at 400 CSS pixels. A contact halfway across the displayed board still maps to logical position 400. Choose the drawing resolution independently according to your renderer and measured device budget. Check that the same logical move selects the same tile at every supported display size, including any offset introduced by centering or letterboxing.
/03
Resize during real interactions
Start a tile drag, rotate the device or resize the containing panel, and finish the gesture. Decide whether the drag follows the new layout or cancels cleanly. Test a modal dialog, a tooltip near the edge, and the undo control during the same transition. A layout that works only when entered from a fresh load is missing a normal gameplay path.
Repeat the transition through narrow, wide, short, and tall containers rather than checking only familiar phone resolutions. Include browser zoom and a move between displays where available. Watch for controls outside the playable area, text that overlaps counters, and drawing that remains blurry after returning to the original size. Record the observed dimensions alongside screenshots so another developer can reproduce the exact geometry.
/04
Bound resize work and preserve game state
Trace how often a resize recomputes the board, reallocates textures, or recreates UI objects. Check that measuring an element and then changing its size does not produce an endless loop of layout adjustments. If repeated notifications arrive during a transition, use the engine's existing update structure to apply a coherent size change. Verify the result rather than adding arbitrary delays until flicker appears to stop.
Run a sequence of repeated sidebar toggles and orientation changes on a representative device. Acceptance means the board contents and score remain unchanged, input targets match the visible tiles, required controls stay reachable, and resizing settles without repeated errors or continuing allocations. Keep a comparison with the original layout so a performance fix cannot quietly reduce readability or remove information that the player needs.
Keep this in mind
Key takeaways
- Define a layout policy and measure the container that actually limits the game.
- Keep display pixels, drawing resolution, and logical game coordinates separate.
- Verify resize behavior during gestures and ensure repeated transitions preserve progress.
Sources & further reading
Consult the source documentation for the version and platform you are working with.