禁用视口缩放iOS 10+野生动物园? [英] disable viewport zooming iOS 10+ safari?

问题描述

我已经将iPhone 6 plus更新到iOS 10 beta版，并且发现在移动浏览器中，您可以通过双击或捏住 IGNORE 元数据中的user-scalable=no代码来缩放任何网页标签.我不知道这是错误还是功能.如果将其视为一项功能，我们如何禁用iOS 10野生动物园的视口缩放功能?

I've update my iPhone 6 plus to iOS 10 beta version and just found that in mobile safari, you can zoom any webpages by double tapping or pinching IGNORE the user-scalable=no code in the meta tag. I don't know whether it's a bug or feature. If it's considered as a feature, how do we disable viewport zooming iOS 10 safari ?

在iOS 11/12版本上进行了更新，iOS 11和iOS 12野生动物园仍然不尊重user-scalable=no元标记.

updated on iOS 11/12 release, iOS 11 and iOS 12 safari still DO NOT respect the user-scalable=no meta tag.

推荐答案

可以在iOS 10的safari中阻止网页缩放，但这将需要您做更多的工作.我认为这种论点是，一定程度的困难应该阻止那些热衷于货物的开发人员将"user-scalable = no"放到每个视口标签中，并使视力受损的用户不必要地感到困难.

It's possible to prevent webpage scaling in safari on iOS 10, but it's going to involve more work on your part. I guess the argument is that a degree of difficulty should stop cargo-cult devs from dropping "user-scalable=no" into every viewport tag and making things needlessly difficult for vision-impaired users.

不过，我还是希望Apple更改其实现方式，以便有一种简单的(元标记)方法来禁用双击放大功能.大多数困难都与这种互动有关.

Still, I would like to see Apple change their implementation so that there is a simple (meta-tag) way to disable double-tap-to-zoom. Most of the difficulties relate to that interaction.

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

You can stop pinch-to-zoom with something like this:

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

请注意，如果有更深层的目标对该事件调用stopPropagation，则该事件将不会到达文档，并且此侦听器也不会阻止扩展行为.

Note that if any deeper targets call stopPropagation on the event, the event will not reach the document and the scaling behavior will not be prevented by this listener.

禁用双击放大功能是相似的.您可以禁用在上一次点击后300毫秒内发生的对文档的任何点击:

Disabling double-tap-to-zoom is similar. You disable any tap on the document occurring within 300 milliseconds of the prior tap:

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

如果您没有正确设置表单元素，则专注于输入将自动缩放，并且由于您大多禁用了手动缩放，因此现在几乎无法取消缩放.确保输入的字体大小> = 16px.

If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.

如果您试图在本机应用程序的WKWebView中解决此问题，则上面给出的解决方案是可行的，但这是更好的解决方案:

If you're trying to solve this in a WKWebView in a native app, the solution given above is viable, but this is a better solution: https://stackoverflow.com/a/31943976/661418. And as mentioned in other answers, in iOS 10 beta 6, Apple has now provided a flag to honor the meta tag.

更新于2017年5月:我用一种更简单的"check event.scale on touchmove"方法代替了禁用"pinch-zoom"的旧的"touchstart上的check touches lengths"方法.应该对每个人都更可靠.

Update May 2017: I replaced the old 'check touches length on touchstart' method of disabling pinch-zoom with a simpler 'check event.scale on touchmove' approach. Should be more reliable for everyone.

这篇关于禁用视口缩放iOS 10+野生动物园?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！