How do you change zoom level dynamically with Javascript?

Question

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

Answer 1

------ 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:

• iPad layout scales up when rotating from portrait to landscape
• How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

---

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