在 IOS 13 safari 上禁用双指缩放

Question

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

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

上的用户体验

有没有办法至少禁用缩放特定元素？

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

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

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

Answer 1

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

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

资源：disable viewport zooming iOS 10+ safari?

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

Answer 2

None 个 JavaScript 解决方案对我有用。我为解决 IOS 上的问题所做的工作是将以下 CSS 添加到我想阻止默认缩放操作的每个元素。

touch-action: none;

Answer 3

我认为使用网络技术构建的应用最可能的用例是您不希望用户手动缩放，但您仍然需要它们在 Y 坐标中滚动。您可以通过在 css 中定位 html 标签在整个应用中启用此功能。禁用双指缩放对于基于 Web 的“应用程序”的行为类似于“应用程序”是必要的。可访问性可以以不同的方式提供，例如提供首选项以调整文本大小。我在 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>

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

在 IOS 13 safari 上禁用双指缩放

Disable pinch zoom on IOS 13 safari

ios

safari

zooming

viewport

pinchzoom