Question

我知道这个问题问了很多。但是，是否可以在最新版本的Safari中禁用缩放功能？

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

是否至少有一种方法可以禁用缩放以放大特定元素？

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

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

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

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

没有一个JavaScript解决方案对我有用。为了解决IOS上的问题，我要做的是将以下CSS添加到每个我要防止对其执行默认缩放操作的元素。

touch-action: none;

Answer 3

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

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

在iOS 13野生动物园中禁用捏缩放

3 个答案: