I just spent hours trying to understand how the viewport functions. You can change it dynamically, but only once. That is. set it to a certain value and let the GUI take that new value in account. Then later you can change it again with another value, if you'd like.

What I was looking to do is reset the zoom back to 1.0 after a user clicked on an image and very likely zoomed in and out to better see the image. At the time the user is done, he clicks the image once and it comes back to the website. Only, the zoom remains the same by default. Which somewhat makes sense since the browser does not really know that that image the user was zooming in was in a popup, what we consider to be a different window, but for the browser it's just another DIV.

The solution is to use JavaScript but to change the viewport twice, BUT NOT IN A ROW. The code looks like this:

var viewport = jQuery("meta[name='viewport']"),
    original_content = viewport.attr("content"),
    new_content = original_content + ", maximum-scale=1";

viewport.attr("content", new_content);
setTimeout(function()
    {
        viewport.attr("content", original_content);
    }, 100);

This code assumes that you do not have a maximum-scale in your original viewport definition.

It gets the current value, adds the "maximum-scale=1" parameter, setup a timer, then returns.

Once the timer kicks in, the default viewport content is restaured.

Note that the default viewport content may need to be read once on startup to avoid reading the wrong value, in case someone clicks on a button a little too fast.

WARNING: The setTimeout() must be used with a number that's not 0. One second may be too long, 100ms may be too short... I tried with 100ms and it worked on my Android.