在 Safari iOS 13 + 上禁用双击缩放答案

【问题标题】：Disable double tap zoom on Safari iOS 13 +在 Safari iOS 13 + 上禁用双击缩放
【发布时间】：2020-05-01 01:53:05
【问题描述】：

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

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

我读到 iOS 13 应该默认禁用“双击缩放”，并且只有双指缩放应该可以工作，但事实并非如此。

【问题讨论】：

标签： html ios web safari

【解决方案1】：

您可以添加以下元标记来停止在 ios 设备上进行缩放。

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

一个 CSS 修复：

body{
    touch-action: manipulation;
}

希望有帮助。

【讨论】：

试试这个 html 的 css 目标正文。身体{触摸动作：操纵； } 更新了小提琴。
不确定将它附加到整个身体可能会产生什么影响，但我可以尝试找到受双击问题影响的元素并使用“触摸动作：操作”那些。
完全使用 user-scalable=0 来阻止缩放对我的应用来说是一个问题，我只需要阻止双击，而不是缩放本身。有没有人有任何适用于 iOS 13+ 的黑客？我试图阻止默认并停止点击传播，将触摸操作设置为操纵和一堆其他的东西都无济于事。
哇！我刚刚习惯了 Apple 试图为这样的事情夺走我的控制权，我很惊讶这能奏效！（是的，我了解一般缩放的可访问性问题以及他们为什么这样做）。
@Simon_Weaver - 正是我的想法！也许我很愤世嫉俗，但我很想担心这很快就会屈服于 IndexedDB、固定定位、vh 单位等的“错误”。

【解决方案2】：

当您只想在部分屏幕上禁用“双击缩放”时（在我的例子中，有一个图片库允许通过点击图库的右侧或左侧来转到下一张或上一张图片并且双击会中断用户体验），您可以在图像元素或其父元素上设置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
})

【讨论】：