Disable zoom on ios and android?
mittjobbkenny opened this issue · comments
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;
}
}
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;
}
}
});