Use a viewport meta tag setting width=device-width, initial-scale=1, maximum-scale=1 and user-scalable=no plus CSS that locks the canvas to 100% of the viewport, disables touch gestures with touch-action: none, and removes default margins and overscroll.
At a glance
| Fact | Value | Source |
|---|---|---|
| Viewport tag prevents pinch-zoom and double-tap zoom | user-scalable=no | developer.mozilla.org |
| CSS property stops browser handling touch gestures | touch-action: none | developer.mozilla.org |
| CSS property stops pull-to-refresh and bounce scroll | overscroll-behavior: none |
Put a viewport tag in the page <head> configured with width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no. This stops mobile browsers auto-zooming into inputs and blocks pinch-zoom, which otherwise breaks canvas games. Pair it with CSS on html, body and the canvas: margin:0; padding:0; overflow:hidden; width:100%; height:100%; touch-action:none; overscroll-behavior:none;. touch-action:none stops the browser turning swipes into scroll or refresh gestures that fight your game’s own input handling.
Do engines need anything extra?
Unity WebGL builds generate their own index.html with a viewport tag already set; edit the template rather than the exported file so changes survive rebuilds. If you need to call browser JS (for example to lock orientation or read safe-area insets) Unity WebGL does it through a .jslib plugin, as described in the Unity manual on interacting with browser scripting. Godot’s HTML5 export also ships a template page you can customize; for JS calls Godot 4 uses the JavaScriptBridge singleton.
Test on real devices, not just desktop resize: check rotation, the iOS Safari address-bar resize, and notch/safe-area padding with env(safe-area-inset-*).
If you add ads on top of this layout, Playgama Ad connects one SDK to 11 demand partners, including Google Ad Manager.
Sources
- Unity manual: Web
- Unity manual: interacting with browser scripting
- Godot docs: exporting for the Web
- Playgama Bridge docs
Related questions
Why does my game canvas resize when the on-screen keyboard opens?
Mobile browsers shrink the viewport height for the keyboard. Listen for a resize or visualViewport event and re-fit the canvas rather than relying on a fixed height.
Should I use vh units for full-screen canvas sizing?
vh units are unreliable on mobile because the address bar changes viewport height. Use JavaScript to read window.innerHeight or visualViewport instead.
Last updated: 24 September 2026