IOS mobile disable zoom

0
votes

I would like to disable zoom for a progressive web application running on IOS 13.0 or higher.

I have seen quite a few similar queries, but with seemingly incomplete answers. I tried to find a solution using multiple event listeners like touchstart and touchmove to block the default browser event [ event.stopPropagation(), event.preventDefault()] and played around with touch-action ... but to no avail.

Disable pinch zoom on IOS 13 safari

html meta viewport user-scalable=no seemed no longer working on iOS 13.3

And for doubleclick zoom disabling as well, I have a similar issue

Disable double tap zoom on Safari iOS 13 +

Thank you in advance for your help,

Stuart

1
ioszoomingpinchzoom

1 Answers

0
votes

I am doing it like this (touchmovetime is a global variable to store a timestamp when the last touch occured):

var touchmovetime;

// add events to inputs and disable pinchtozoom
var disablePinchToZoom = function (event) {
    if (typeof event.scale !== "undefined" && event.scale !== 1) { event.preventDefault(); }
    touchmovetime=event.timeStamp;
};

var myDisabledTouchmove = function (event) {
    event.preventDefault();
    touchmovetime=event.timeStamp;
};

var myDisabledEvent = function (event) {
    event.preventDefault();
    if ((event.timeStamp - touchmovetime)>200) {
        event.changedTouches[0].target.click();
        event.changedTouches[0].target.focus();
    } // always issues single clicks but not for touchmove events
};

var ids= ["element1", "element2"];
var c;

for (var i in ids) {
    c = document.getElementById(ids[i]);
    c.addEventListener("touchmove", disablePinchToZoom, false);
    c.addEventListener("touchmove", myDisabledTouchmove, false);
    c.addEventListener("touchend", myDisabledEvent, false);
    if (isAndroid) {
        c.addEventListener("touchstart", function(e) { touchEvent.preventDefault(); }, false);
    }
}