IOS移动禁用缩放

Posted 2023-03-28

【中文标题】IOS移动禁用缩放

【英文标题】：IOS mobile disable zoom

【发布时间】：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 +

提前感谢您的帮助，

斯图尔特

【参考方案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);