Javascript for mobile browsers (Safari, Alook…) Unable to disable the scaling problem

There are two kinds of web zooming on mobile terminal: double click zooming and double finger gesture zooming.

Before iOS 10, both iOS and Android could disable page zooming with a single meta tag:

<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Copy the code

Starting with iOS 10, however, the meta setting will no longer work in Safari, and the corresponding inability to disable zooming will also appear on other iOS browsers.

The workaround is to import the following JS configuration on the page where zooming needs to be disabled:

window.onload = function() {
  // Prevents double-clicking to zoom in
  var lastTouchEnd = 0;
  document.addEventListener('touchstart'.function(event) {
    if (event.touches.length > 1) { event.preventDefault(); }});document.addEventListener('touchend'.function(event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) { event.preventDefault(); }
    lastTouchEnd = now;
  }, false);
  // Prevent double finger enlargement
  document.addEventListener('gesturestart'.function(event) {
    event.preventDefault();
  });
}
Copy the code