禁用视口缩放iOS 10 Safari？

Question

我已经将我的iPhone 6 plus升级到iOS 10测试版，刚刚发现在移动safari中，你可以通过双击或捏IGNORE来缩放任何网页。我不知道是bug还是功能。如果将其视为一项功能，我们如何禁用iOS 10 safari的视口缩放？

iOS 11/12 版本更新，iOS 11 和 iOS 12 野生动物园仍然不尊重用户可扩展=无元标记。

Answer 1

在撰写本文时，在MobileSafari中有效的解决方法是将addEventListener中的第三个参数设置为{被动： false}，因此完整的解决方法如下所示：

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

您可能需要检查是否支持选项以保持向后兼容。

Answer 2

这是iOS 10中的新功能。

来自iOS 10 beta 1发行说明:

• 为了改进 Safari 中网站的辅助功能，用户现在可以捏合缩放，即使网站在视口中设置了用户可缩放=否。

我希望我们很快会看到一个JS插件来以某种方式禁用它。

Answer 3

在iOS 10上的safari中防止网页缩放是可能的，但这需要你做更多的工作。我想争论的焦点是，一定程度的困难应该阻止cargo-cult开发人员在每个viewport标签中加入“user-scalable=no ”,并为视力受损的用户制造不必要的困难。

尽管如此，我还是希望看到Apple更改其实现，以便有一种简单的（元标记）方法来禁用双击缩放。大多数困难与这种互动有关。

您可以通过以下方式停止缩放:

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

请注意，如果任何更深层次的目标对事件调用 stopPropagation，则该事件将不会到达文档，并且此侦听器不会阻止缩放行为。

禁用双击缩放类似。您禁用在上一次点击后300毫秒内对文档进行的任何点击：

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

如果您没有正确设置表单元素，专注于输入将自动缩放，并且由于您大多禁用了手动缩放，现在几乎不可能取消缩放。确保输入字体大小为

如果您尝试在本机应用程序的 WKWebView 中解决此问题，上面给出的解决方案是可行的，但这是一个更好的解决方案：html" target="_blank">https://stackoverflow.com/a/31943976/661418。正如其他答案中提到的，在iOS 10 beta 6中，Apple现在提供了一个标志来尊重元标记。

2017年5月更新:我用更简单的“在触摸移动时检查事件.缩放”方法取代了旧的“在触摸开始时检查触摸长度”方法来禁用缩放。对大家来说应该比较靠谱。