{"id":14514,"date":"2026-09-24T10:31:41","date_gmt":"2026-09-24T10:31:41","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=14514"},"modified":"2026-09-24T10:31:41","modified_gmt":"2026-09-24T10:31:41","slug":"how-to-set-viewport-meta-tags-and-css-for-mobile-browser-gam","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-set-viewport-meta-tags-and-css-for-mobile-browser-gam\/","title":{"rendered":"How to set viewport meta tags and CSS for mobile browser games?"},"content":{"rendered":"

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.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
Viewport tag prevents pinch-zoom and double-tap zoom<\/td>\nuser-scalable=no<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
CSS property stops browser handling touch gestures<\/td>\ntouch-action: none<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
CSS property stops pull-to-refresh and bounce scroll<\/td>\noverscroll-behavior: none<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Put a viewport tag in the page <head> configured with width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no<\/code>. 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;<\/code>. touch-action:none<\/code> stops the browser turning swipes into scroll or refresh gestures that fight your game’s own input handling.<\/p>\n

Do engines need anything extra?<\/h2>\n

Unity WebGL builds<\/a> 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<\/a>. Godot’s HTML5 export<\/a> also ships a template page you can customize; for JS calls Godot 4 uses the JavaScriptBridge singleton.<\/p>\n

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-*).<\/p>\n

If you add ads on top of this layout, Playgama Ad<\/a> connects one SDK to 11 demand partners, including Google Ad Manager.<\/p>\n

Sources<\/h2>\n