4

I'm trying to figure out how to reset the zoom level in a webpage for ios. It seems that when the user does a pinch zoom in/out the zoom feature no longer works. I want pinch gestures, but want to programatically reset the zoom. Anyone have ideas on changing zoom dynamically with Javascript/jQuery?


<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />


$(document).ready(function () {
      $("#zoomOut").click(function(){
            $('meta[name=viewport]').attr('content', 'initial-scale=0.5; maximum-scale1; user-scalable=1;');
        });

      $("#zoomIn").click(function(){
             $('meta[name=viewport]').attr('content', 'initial-scale=1; maximum-scale=1.0; user-scalable=1;');
        });
});
MatsDesign
  • 49
  • 1
  • 1
  • 3
  • Could you state if your code is not doing what is intended? Or are you seeking additional ideas on how else you can do this? – Calvin Jan 10 '13 at 02:27

1 Answers1

16

------ Update ------

This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fix that works for iOS6.

------ Original answer ------

Taking answers from these:

Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale

Keep the Markup scalable by not setting a maximum-scale in markup.

<meta name="viewport" content="width=device-width, initial-scale=1">

Then disable scalability with javascript on load until gesturestart when you allow scalability again with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
Community
  • 1
  • 1
Calvin
  • 1,305
  • 8
  • 17
  • 1
    So when you pinch zoom, why doesn't it allow it to reset the initial-scale? – MatsDesign Jan 14 '13 at 18:01
  • 4
    This question is old, but i just upvoted your answer because its correct, and extremely annoying when the asker of the question cannot take the time out of their day to thank you by choosing yours as correct. – Optox Jun 25 '13 at 13:38
  • thanks! worked like a charm. Placed code in a file and added to head. – Norman Bird Jun 17 '14 at 07:39
  • Updating the viewport meta with JS did no trigger a change of scaling in my tests on mobile safari ios7. – coulix Dec 08 '15 at 09:03
  • @coulix it works differently now is iOS7. I've updated my answer to make this more relevant. – Calvin Feb 08 '16 at 01:42
  • This code will prevent zooming from happening in the first place, but if the browser is already zoomed in, is there a way to dynamically de-zoom? – kshetline Jul 20 '21 at 22:16