CODEWITHSUNDEEP
javascriptiphonemobile-safari
msqr
msqr

Reputation: 296

Enable/disable zoom on iPhone safari with Javascript?

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

Upvotes: 11

Views: 36530

Answers (3)

Szalai Laci
Szalai Laci

Reputation: 600

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

Upvotes: 0

Dmitri Kulichkin
Dmitri Kulichkin

Reputation: 75

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

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

Upvotes: 5

Erik Z
Erik Z

Reputation: 199

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?

Upvotes: 19

Related Questions