在 IOS 13 Safari 上禁用捏缩放答案

【问题标题】：Disable pinch zoom on IOS 13 safari在 IOS 13 Safari 上禁用捏缩放
【发布时间】：2020-02-19 20:51:38
【问题描述】：

我知道这个问题被问了很多。但是在最新版本的 safari 上是否有任何关于禁用捏合缩放的更新？

我有一个地图应用程序，它实现了缩放网页（地图）的特定元素。我希望用户能够放大地图，而页面周围的 UI 保持不变。这破坏了我在 IOS 上的用户体验。

有没有办法至少禁用捏合来放大特定元素？

这是我的网页，因此您可以准确地看到我在说什么。我希望您能明白为什么禁用视口缩放（至少当用户在地图上捏捏时）实际上对可访问性有好处。

https://www.yapms.com/app/?t=USA_2020_presidential

更多信息：我已经在使用hammerjs 来放大网页上的特定元素，所以我想禁用这些元素的苹果视口缩放。

【问题讨论】：

标签： ios safari zooming viewport pinchzoom

【解决方案1】：

也许文档上的这个事件监听器会有所帮助

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

资源：disable viewport zooming iOS 10+ safari?

有关此问题的详细说明，请参阅 Casper Fabricius 的回答

【讨论】：

【解决方案2】：

没有一个对我有用的 JavaScript 解决方案。我在 IOS 上解决此问题的方法是将以下 CSS 添加到我想要阻止默认缩放操作的每个元素中。

touch-action: none;

【讨论】：

【解决方案3】：

我认为使用网络技术构建的应用最可能的用例是您不希望用户手动捏缩放，但您仍然需要它们在 Y 坐标中滚动。您可以通过在 css 中定位 html 标记在整个应用程序上启用此功能。禁用缩放缩放对于基于 Web 的“应用程序”表现得像“应用程序”是必要的。可以通过不同的方式来适应可访问性，例如提供调整文本大小的首选项。我在 iPhoneX OS 版本 13.5.1 上的 Safari 和 Edge 上对此进行了测试

<style type="text/css" media="screen">
        html {
            -webkit-text-size-adjust: none;
            touch-action: pan-y; /*prevent user scaling*/
        }
</style>

【讨论】：

这是我见过的百万美元网站使用的方法。

【解决方案4】：

我使用了touch-action 和pointer-events 的组合来禁用任何地方的所有手势，并且只允许对交互元素进行基本触摸。在 iOS 15 的 Safari 中运行良好。可以修改为允许一些手势，例如，通过将 none 替换为 pan-y 等。我用它来实现涉及快速触摸按钮的控制面板或游戏，这会导致不需要的缩放和滚动手势。

* {
    touch-action: none;
    pointer-events: none;
}

input, button {
    pointer-events: auto;
}

此外，固定位置可以有效地绕过滚动并将元素保留在屏幕上。

html, body {
    position: fixed;
}

【讨论】：