Webkit iPhone App: How to dynamically change user zoom (or zoom, peak and zoom) in the viewport?

Question

I am using JQTouch for an iPhone application. JQtouch disables by default the ability to pinch and enlarge a page. For one page (containing a large image) I need to enable the pinch and zoom function. This is easy:

var viewport = $("head meta[name=viewport]"); viewport.attr('content', 'width=320, initial-scale=1, maximum-scale=10.0, minimum-scale=1, user-scalable=1'); 

But after the user has played with a pinch and scaling, I need to dynamically reset the scaling (scale) to the default value. I tried resetting the viewport:

 viewport.attr('content', 'width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;'); 

After calling the above code, it cannot be increased (due to user-scaleable = 0;), but it does not change the current scale to the default value.

I'm looking for something like setScale (1) or changing the attribute like current-scale = 1

Any idea?

Answer 1

The only way to reset user scaling is to reload the page:

 window.location.reload(); 

If you do not want to do this, you need to add a script to dynamically change elements such as images with touch events. Here is an example of scaling and zooming with scrolling:

http://tlrobinson.net/projects/iphone-light-table/

Easily integrate this code into your project. just open the HTML source, copy Javascript and change the init () function to suit your needs.