jQuery Mobile - Enabling the pinch/zoom for the iPad, iPhone

When jQuery Mobile renders a page, it adds the following meta tag to the head of the document.

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

It is the minimum-scale=1, maximum-scale=1 part of the tag which disables the pinch zoom. What we need to do is modify the $.mobile.metaViewportContent variable. We can do this using the following code.

1	$(document).bind('mobileinit', function(){

2	$.mobile.metaViewportContent = 'width=device-width';

3

});

If we want to restrict the amount of zooming, we can use the following:

1	$(document).bind('mobileinit', function(){

2	$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';

3

});