Why an overlay, not just a lock
The Screen Orientation API's lock() works only in fullscreen and is not available in every WebView, so a game cannot count on it. A CSS media query, by contrast, works everywhere: when the phone is held the wrong way, a full-screen message covers the game and the loop pauses. When the player rotates, the overlay disappears and the engine re-fits the canvas. The snippet still tries the lock on the first tap, as a bonus where it is supported.
Engine notes
- Phaser: listen for
game:pause/game:resumeand callgame.loop.sleep()/wake(); the Scale Manager handles the resize. - PixiJS:
app.ticker.stop()/start(), andresizeTo: window. - Construct / GDevelop: both have orientation settings in the export; the overlay is still a good fallback.
More: HTML5 game to APK · game performance on Android.
Questions people ask
Can I force landscape in an HTML5 game APK?
Not reliably from JavaScript — the orientation lock needs fullscreen and API support. Design the game to show a rotate overlay in the wrong orientation, which works on every phone.
Does the overlay work in Chrome too?
Yes. It is plain CSS and JavaScript, so the same build works on your website and in the APK.