Disable zoom on ios and android?

[mittjobbkenny]

Would like to know if it's possible to disable zoom on ios and andoid? I have tested this but it doesnt work. I would still like to be able to zoom using scrollwheel and buttons.

const pz = panzoom(panElement, { maxZoom: 500, minZoom: 0.1, zoomDoubleClickSpeed: 1 initialX: 0, initialY: 0, initialZoom: 1, beforeWheel: function(e) { if (e.ctrlKey || e.metaKey) { return true; } else { e.preventDefault(); return false; } }

[HumboldtK]

I use this for my setup,

function isMobileDevice() {
  if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return true;
  }
  if (/iPad/i.test(navigator.userAgent) || (navigator.userAgent.includes('Mac') && navigator.maxTouchPoints > 1)) {
    return true;
  }
  const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  const ratio = window.screen.width / window.screen.height;
  if (iOS && ratio > 0.75 && ratio < 0.85) { 
    return true;
  }
  return false;
};

Then setting up the panzoom instance you can specifiy the min and max zoom for mobile devices. Been working pretty well for me.

const instance = panzoom(canvas, {
  maxZoom: isMobileDevice() ? 50 : 100,
  minZoom: isMobileDevice() ? 0.2 : 0.5, 
  zoomSpeed: 0.35,
  boundsDisabledForZoom: true,
  zoomDoubleClickSpeed: 2,
  smoothScroll: false,
});

Try this -

function isMobileDevice() {
  if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return true;
  }
  if (/iPad/i.test(navigator.userAgent) || (navigator.userAgent.includes('Mac') && navigator.maxTouchPoints > 1)) {
    return true;
  }
  const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  const ratio = window.screen.width / window.screen.height;
  if (iOS && ratio > 0.75 && ratio < 0.85) { 
    return true;
  }
  return false;
}

const pz = panzoom(panElement, {
  maxZoom: isMobileDevice() ? 1 : 500, // Disable zooming on mobile devices
  minZoom: isMobileDevice() ? 1 : 0.1, // by setting max and min zoom to 1
  zoomDoubleClickSpeed: 1,
  initialX: 0,
  initialY: 0,
  initialZoom: 1,
  beforeWheel: function(e) {
    if (e.ctrlKey || e.metaKey) {
      return true;
    } else {
      e.preventDefault();
      return false;
    }
  }
});