Skip to content
jamieonkeys.dev

Preventing zooming on mobile

How to stop users pinching or double-tapping to zoom

I’m creating an HTML5 puzzle game. One of my requirements is to prevent mobile users from zooming in, either via double-tapping or pinching. Normally you’d not want this restriction for accessibility reasons, but in terms of the game it was making the user experience worse and even messing up geometric calculations the game makes to detect a ‘win’.

If memory serves, what used to be sufficient was adding user-scalable=no and maximum-scale=1 to the ‘viewport’ meta tag:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

However this certainly doesn’t work on iOS now, and using it will lower your Google Lighthouse score.

It is nonetheless still possible to disable zooming.

touch-action: none; prevents pinching to zoom (source: MDN):

#game_surface {
touch-action: none;
}

(I’ve actually applied this rule to html and body, rather than just the game surface.)

And you can disable double-tap-to-zoom with JavaScript (source: Stack Overflow):

let last_touch_end = 0;
document.addEventListener("touchend", function (e) {
const now = (new Date()).getTime();
if (now - last_touch_end <= 300) {
e.preventDefault();
}
last_touch_end = now;
}, false);

You might also wish to disable text selection:

#game_surface {
touch-action: none;
-webkit-user-select: none;
user-select: none;
}

It’s worth repeating that you shouldn’t add these restrictions to web pages or apps by default, as it compromises accessibility, or could just irritate users. But for a game or similar application where you want to prevent default zooming, it does the job.