禁用视口缩放iOS 10+狩猎？

Question

我已经更新了我的iPhone 6加上iOS 10测试版，刚刚发现在移动safari中，您可以通过双击或点击忽略元标记中的user-scalable=no代码来缩放任何网页。我不知道是窃听器还是特写。如果它被认为是一项功能，我们如何禁用视口缩放iOS 10狩猎？

在iOS 11/12发布版上进行了更新，iOS 11和iOS 12 safari仍然做而不是尊重user-scalable=no元标记。

​

​

Answer 1

在iOS 10上防止safari中的网页缩放是可能的，但这将涉及到更多的工作。我猜想，在一定程度上的困难应该阻止“货真价实的开发人员”将“用户可伸缩=不”放到每个视口标签中，并使视力受损的用户不必要地感到困难。

尽管如此，我还是希望看到苹果改变他们的实现，这样就有了一种简单的(元标签)方式来禁用双击缩放。大多数困难都与这种互动有关。

你可以用这样的东西来停止按压放大：

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);

如果您没有正确设置表单元素，集中在输入上将自动缩放，而且由于您已经大部分禁用了手动缩放，所以现在几乎不可能取消缩放。确保输入字体大小为>= 16 is。

如果您想在本地应用程序的WKWebView中解决这个问题，那么上面给出的解决方案是可行的，但这是一个更好的解决方案：https://stackoverflow.com/a/31943976/661418。正如在其他答案中提到的，在iOS 10 beta 6中，苹果现在提供了一个标志来纪念元标签。

更新2017年5月：我取代了旧的‘点击触摸长度’的方法禁用捏-变焦用一个更简单的‘检查event.scale在触摸移动’的方法。对每个人来说都应该更可靠。

Answer 2

这是iOS 10中的一个新特性。

来自iOS 10 beta 1发行说明：

• 为了提高Safari网站的可访问性，用户现在可以按一下缩放，即使网站在视图中设置了user-scalable=no。

我希望我们很快会看到一个JS加载项，在某种程度上禁用它。

Answer 3

在撰写本文时，在Mobile中使用的解决方法是在addEventListener be { passive: false }中使用第三个参数，因此完整的解决方法如下所示：

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

您可能希望检查是否支持选项保持向后兼容。