Preventing zooming on mobile

I’m creating an HTML5 puzzle game and need to prevent mobile users from zooming in, either via double-tapping or pinching. Normally, for accessibility reasons, you’d not want to have this restriction. 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 and apps by default, as it compromises accessibility. But for a game or similar application where you do want to prevent default zooming, the above code does the job.