Enable/disable zoom on iPhone safari with Javascript?

Question

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

Erik Z · Accepted Answer · 2010-07-28 20:20:22Z

19

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?

answered Jul 28, 2010 at 20:20

Erik Z

1992 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Caius Eugene Over a year ago

content="width=960" forces it to stay at zoomed "out" on portrait view.

guari Over a year ago

it doesn't work on Android 4.2 native browser, if you remove the zoom then you can't re-enable it by restoring the meta tag attributes as done in this function.

stealthyninja · Accepted Answer · 2011-12-27 18:33:59Z

5

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

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

edited Dec 27, 2011 at 18:33

stealthyninja

10.4k11 gold badges57 silver badges61 bronze badges

answered Nov 17, 2010 at 12:24

Dmitri Kulichkin

751 silver badge1 bronze badge

2 Comments

maddrag0n Over a year ago

doesn’t that disable scrolling as well?

Heretic Monkey Over a year ago

This disables all gestures that require moving while touching...

Community · Accepted Answer · 2017-05-23 11:54:09Z

0

These are the steps to disable zooming:

Convince your PM that disabling is a bad idea (see the below article).
If he still wants it, convince him harder.
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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 14, 2017 at 6:49

Szalai Laci

6302 gold badges6 silver badges13 bronze badges

Collectives™ on Stack Overflow

Enable/disable zoom on iPhone safari with Javascript?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related