Question

我有1个页面有2个DIV元素，根据用户点击动作按钮显示/隐藏javascript，我想在动作按钮点击时切换缩放。

我尝试使用下面的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);
            }
        }

Answer 1

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

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

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

Answer 2

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

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

Answer 3

以下是禁用缩放的步骤：

说服你的PM，禁用是一个坏主意（见下文）。
如果他仍然想要它，那就说服他更难。
如果他仍然想要它，请阅读本文并将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

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

3 个答案: