使用Javascript在iPhone Safari上启用/禁用缩放？

Question

我有一个页面，其中有两个DIV元素，根据用户在操作按钮上的点击显示/隐藏，我想在操作按钮点击时切换缩放。

我尝试了下面的javascript代码，它可以改变viewport meta，但是没有效果。

有什么建议吗？

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

- msqr

Answer 1

删除并重新添加 meta 标签对我有用：

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" />');              
  }
}

然而，如果用户放大页面然后切换回不放大页面，视口仍保持放大状态，用户无法再次更改缩放比例。有人有解决方案吗？

- Erik Z

---

content="width=960" 会强制在纵向视图上缩小，保持缩放状态。 - Caius Eugene

它在Android 4.2原生浏览器上无法工作，如果您删除缩放，则无法通过恢复元标记属性来重新启用它，就像此函数中所做的那样。 - guari

Answer 2

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

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

- Dmitri Kulichkin

---

这会禁用滚动吗？ - maddrag0n

这将禁用所有需要在触摸时移动的手势... - Heretic Monkey

Answer 3

以下是禁用缩放的步骤：

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://dev59.com/o53ha4cB1Zd3GeqPTmIy#41166167

- Szalai Laci