Choose a layout policy
A responsive game can reflow the playfield, letterbox a stable virtual area or show a clear rotate-device prompt. Pick based on the mechanic: a wide lane runner may need horizontal space, while a vertical stacking game may remain readable upright. Avoid stretching the entire scene to fit because that changes object proportions and can make hit areas inconsistent.
Use CSS media queries for layout decisions tied to viewport orientation. Listen for ScreenOrientation changes only when script needs that state; do not rely on the deprecated window orientationchange event. Locking orientation should be a deliberate requirement with a fallback, not a shortcut for an untested layout.
Rebuild the coordinate mapping
After rotation, measure the current game container and recalculate its presentation transform. Update pointer-to-world coordinate conversion before accepting another action. If a drag is in progress, either preserve it through the new transform or cancel it cleanly; mixing old pointer coordinates with a new canvas size can teleport an object across the scene.
Test rotation before a run, during a drag and with menus open. Verify resize does not start a new session and controls remain reachable. MDN describes ScreenOrientation change events and locking; use them when needed, while allowing device behavior to determine whether a lock succeeds.
Questions about game orientation changes
Should a browser game force landscape mode?
Only when the game has a strong reason and a clear fallback. A responsive layout or rotate-device prompt may be more appropriate than locking the screen.
Does rotation always fire a resize event?
Viewport and orientation behavior can differ by browser and device. Test the events your implementation depends on and remeasure the actual game container after a change.