使用 Javascript 启用/禁用 iPhone Safari 的缩放？

Question

我有 1 个页面，其中包含 2 个 DIV 元素，这些元素根据用户使用 javascript 对操作按钮的点击显示/隐藏，我想在点击操作按钮时切换缩放。

我尝试使用下面的 javascript，它正在更改视口元数据，但没有任何效果。

有什么建议吗？

var ViewPortAllowZoom = 'width=device-width;';

var ViewPortNoZoom = 'width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;';

  function AllowZoom(flag) {
            if (flag == true) {
                $('meta[name*=viewport]').attr('content', ViewPortAllowZoom);                
            }
            else {
                $('meta[name*=viewport]').attr('content', ViewPortNoZoom);
            }
        }

Answer 1

这些是禁用缩放的步骤：

1. 说服您的 PM 禁用是一个坏主意（请参阅下面的文章）。
2. 如果他还想要，就更努力地说服他。
3. 如果他仍然想要它，请阅读这篇文章并将 preventDefault 添加到gesturestart，如评论中所述： https://wouterdeschuyter.be/blog/how-to-disable-viewport-scaling-in-ios-10-you-dont-941140811

它适用于 iPhone 6 并且不会阻止滚动。

感谢链接，Aloober：https://stackoverflow.com/a/41166167/1409261

Answer 2

$('body').bind('touchmove', function(event) { event.preventDefault() }); // turns off

$('body').unbind('touchmove'); // turns on

Answer 3

删除和重新添加元标记对我有用：

function AllowZoom(flag) {
  if (flag == true) {
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1, user-scalable=1" />');
  } else {
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />');              
  }
}

但是，如果用户放大然后切换到不缩放，则视口将保持缩放状态，并且用户无法再更改缩放。有人对此有解决方案吗？