IOS移动禁用缩放答案

【问题标题】：IOS mobile disable zoomIOS移动禁用缩放
【发布时间】：2020-09-09 03:00:24
【问题描述】：

我想为在 IOS 13.0 或更高版本上运行的渐进式 Web 应用程序禁用缩放。

我见过很多类似的查询，但答案似乎不完整。我试图找到一个解决方案，使用多个事件侦听器（如 touchstart 和 touchmove）来阻止默认浏览器事件 [ event.stopPropagation(), event.preventDefault()] 并使用 touch-action ...但无济于事。

Disable pinch zoom on IOS 13 safari

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

对于禁用双击缩放，我也有类似的问题

Disable double tap zoom on Safari iOS 13 +

提前感谢您的帮助，

斯图尔特

【问题讨论】：

标签： ios zooming pinchzoom

【解决方案1】：

我是这样做的（touchmovetime 是一个全局变量，用于存储最后一次触摸发生时的时间戳）：

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);
    }
}

【讨论】：