在iOS 13的Safari浏览器上禁用捏合缩放

Question

我知道这个问题已经被问了很多次。但在最新版的Safari中是否有任何更新，可以禁用捏合缩放？

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

是否有一种方法至少可以禁用特定元素的双指捏合缩放功能？

以下是我的网页链接，以便您可以看到我在说什么。我希望您能够看到为什么禁用视口缩放（至少当用户在地图上双指捏合时）实际上是有益的，对于可访问性来说。

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

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

- Fish

Answer 1

也许在文档上添加这个事件监听器会有所帮助。

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

资源: 如何禁用iOS 10+ Safari的视口缩放？

请参考Casper Fabricius的答案，以获取有关此问题的详细说明。

- antonio yaphiar

---

这是唯一一个在iOS 16.x上仍然可用的东西。 - Qasim

Answer 2

对我来说，没有 JavaScript 的解决方案可行。为了解决 IOS 上的问题，我添加了以下 CSS 到每个我想要防止默认缩放操作的元素中。

touch-action: none;

- Fish

---

将它添加到 :root{} 元素中会在整个页面上应用吗？我认为是的。 - Marvin Danig

Answer 3

我认为使用Web技术构建的应用程序最可能的用途是，您不希望用户手动捏合缩放，但仍需要他们在Y坐标中滚动。您可以通过在CSS中定位html标签来在整个应用程序上启用此功能。禁用捏合缩放对于基于Web的“应用程序” behaving like “应用程序” 是必要的。可以通过提供首选项以调整文本大小等不同方式来适应辅助功能。我在iPhoneX OS ver 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>

- Chris M.

---

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

缺乏捏合缩放功能是原生应用的一个不足之处。没有必要模仿这种不足。将其内置于移动浏览器中可以节省开发者的时间和金钱。除了提问者特殊情况下的地图（其中专门的捏合缩放取代了浏览器的功能），或者可能是视频游戏或像Figma这样的编辑器，捏合缩放不应该被禁用，因为对大多数用户来说，它是一种非常熟悉的操作方式。这只是基本的用户体验设计！ - hegel5000

这里的目标不是禁用捏合缩放。我有一个网站，在主应用程序周围构建了一个用户界面。问题是，当用户尝试对主应用程序进行缩放时，整个界面也会被缩放。当用户在不同的元素上捏合时，我需要更精细的控制来确定应用程序的哪些部分会被缩放。 - Fish

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

- ivop