禁用IOS 13 safari上的缩放功能

Question

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

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

有没有一种方法可以至少禁用对特定元素的缩放？

这是我的网页，所以你可以准确地看到我在说什么。我希望你能理解为什么禁用视口缩放(至少当用户捏住地图时(实际上会对可访问性有好处。

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

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

Answer 1

也许文档上的这个事件监听器将帮助

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

资源：禁用视口缩放iOS 10+safari？

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

Answer 2

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

touch-action: none;

Answer 3

我认为使用web技术构建的应用程序最有可能的用例是，您不希望用户手动缩放，但仍然需要它们在Y坐标中滚动。您可以通过在css中定位html标记在整个应用程序上启用此功能。禁用捏缩缩放对于基于web的"缩放"是必要的；应用程序"；表现得像"；应用程序"；。辅助功能可以通过不同的方式提供，例如提供调整文本大小的首选项。我在iPhone X操作系统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中运行良好。可以修改以允许一些手势，例如，用pan-y代替none等。我用它来实现控制面板或游戏，这些面板或游戏涉及快速触摸按钮，这会导致不需要的缩放和滚动手势。

* {
touch-action: none;
pointer-events: none;
}
input, button {
pointer-events: auto;
}

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

html, body {
position: fixed;
}