禁用Safari iOS 13+上的双击缩放功能

Question

我们如何在Safari iOS 13+移动设备上禁用“双击缩放”？

有时会缩放，有时不会。我感觉它可能仅适用于特定的HTML元素。

我读到说iOS 13默认应该禁用“双击缩放”，只有手指捏合缩放才有效，但事实并非如此。

- oygen

Answer 1

您可以添加以下元标记以停止 iOS 设备上的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>

一个 CSS 修复：

body{
    touch-action: manipulation;
}

希望有所帮助。

Hope is helps.

- Kevin

---

尝试使用以下 CSS 目标 HTML 的 body 元素： body{ touch-action: manipulation; }更新了 Fiddle。 - Kevin

不确定将其附加到整个主体的影响是什么，但我可以尝试找出双击问题受影响的元素，并在这些元素上使用“touch-action：manipulation”。 - oygen

完全使用"user-scalable=0"阻止缩放对我的应用程序是一个问题，我只需要阻止双击而不是缩放本身。有人有任何在iOS 13+上真正起作用的解决方法吗？我已经尝试过在我的点击上防止默认行为和停止传播，将触摸操作设置为操作，并尝试了许多其他方法都无效。 - Guillaume Richard

哇！我刚刚习惯了苹果试图从我这样的事情中夺取控制权，所以我很惊讶这个起作用了！（是的，我理解缩放一般的可访问性问题以及他们为什么这样做）。 - Simon_Weaver

@Simon_Weaver - 我完全同意你的想法！也许我有点愤世嫉俗，但我担心这很快会像IndexedDB、固定定位、vh单位等一样被一个“bug”所摧毁。 - Jeff McMahan

某些元素在14.3和15.0中无法正常工作。https://jsbin.com/sizavudima/edit?html,output - David Vielhuber

Answer 2

这在Safari iOS 15中有效。

document.ondblclick = function(e) {
    e.preventDefault();
}

- Ryan Dantzler

Answer 3

我之前在尝试阻止任何触摸屏浏览器双击或双指缩放时，偶然发现了这个页面。这对于我的网站非常重要，因为它在平板电脑上展示，让公众可以点击并注册他们参加的活动的满意度，所以我不希望任何人来搞乱布局。

我曾经尝试过Helmet，但没有成功。最终，我通过使用类似上面的CSS来禁用所有不需要的移动/缩放事件。

body {
  touch-action: none;
}

设置“none”禁用了双击缩放，而“manipulation”仍然打开了双击缩放的功能（尽管它禁用了双指缩放）。

- Oddlad

Answer 4

当您想要在屏幕的部分区域禁用“双击缩放”时（在我的情况下，有一个图像库，允许通过轻敲图库的右侧或左侧来进入下一张或上一张图片，而双击则会中断用户体验），您可以在图像元素或其父元素上设置pointer-events: none，并将事件监听器附加到图像库的根元素。

因此，给定以下HTML：

<header>…</header>
<ul class="slideshow">
 <li><img src="…" /></li>
 …
</ul>
<footer></footer>

你可以在 CSS 中这样做：

.slideshow > * {
  pointer-events: none;
}

并将事件监听器附加到未禁用其指针事件的.slideshow：

document.querySelector('.slideshow').addEventListener('click', (event) {
  // detect what part of the screen was clicked and go to the next 
  // or previous slide
})

- Misha Reyzlin