提问者:小点点

在IOS 13 safari上停用捏合缩放


我知道这个问题已经被问了很多。但是,在最新版本的野生动物园上禁用捏缩放是否有任何更新?

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

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

这是我的网页,这样你就可以准确地看到我在说什么。我希望你能明白为什么禁用视口缩放(至少当用户在地图上捏的时候)实际上是一个好处,为了可访问性。

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

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


共3个答案

匿名用户

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

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

资源:禁用视口缩放iOS 10 safari?

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

匿名用户

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

touch-action: none;

匿名用户

我认为使用 Web 技术构建的应用程序最可能的用例是您不希望用户手动捏合缩放,但您仍然需要它们在 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>