我已将我的 iPhone 6 plus 更新至 iOS 10 Beta 版本,并且刚刚发现在移动 Safari 中,您可以通过双击或捏合忽略user-scalable= 来缩放任何网页元标记中没有
代码。我不知道这是一个错误还是功能。如果将其视为一项功能,我们如何禁用 iOS 10 safari 的视口(viewport)缩放?
在 iOS 11/12 版本上更新,iOS 11 和 iOS 12 safari 仍然不尊重 user-scalable=no
元标记。
最佳答案
在 iOS 10 上,可以阻止 Safari 中的网页缩放,但这需要您做更多的工作。我想争论的焦点是,一定程度的难度应该阻止 cargo 崇拜开发者将“user-scalable=no”放入每个视口(viewport)标签中,并为视力受损的用户带来不必要的困难。
不过,我希望看到苹果改变他们的实现方式,以便有一种简单的(元标记)方法来禁用双击缩放。大多数困难都与交互有关。
您可以通过以下方式停止捏合缩放:
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);
如果您没有正确设置表单元素,则专注于输入将自动缩放,并且由于您基本上禁用了手动缩放,所以现在几乎不可能取消缩放。确保输入字体大小 >= 16px。
如果您尝试在 native 应用程序的 WKWebView 中解决此问题,上面给出的解决方案是可行的,但这是一个更好的解决方案:https://stackoverflow.com/a/31943976/661418 。正如其他答案中提到的,在 iOS 10 beta 6 中,Apple 现在提供了一个标志来支持元标记。
2017 年 5 月更新:我用更简单的“在 touchmove 上检查 event.scale”方法替换了禁用捏缩放的旧“在 touchstart 上检查触摸长度”方法。对每个人来说应该更可靠。
关于mobile-safari - 禁用视口(viewport)缩放 iOS 10+ safari?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37808180/