Enable/disable zoom on iPhone safari with Javascri

问题:

I have 1 page which has 2 DIV elements which is shown/hidden based on user click on action buttons with javascript, I would like to toggle scaling on action button click.

I tried with below javascript and it is changing viewport meta but getting no effect.

Any suggestions?

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

回答1:

Removing and re-adding the meta tag worked for me:

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

However, if the user zooms in and then switches to no zoom, the viewport remains zoomed and the user can no longer change the zoom. Does anyone have a solution for that?

回答2:

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

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

回答3:

These are the steps to disable zooming:

1. Convince your PM that disabling is a bad idea (see the below article).
2. If he still wants it, convince him harder.
3. If he still wants it, read this article and add preventDefault to gesturestart as explained in a comment in there: https://wouterdeschuyter.be/blog/how-to-disable-viewport-scaling-in-ios-10-you-dont-941140811

It works in iPhone 6 and doesn't block scrolling.

Thanks for link, Aloober: https://stackoverflow.com/a/41166167/1409261