Pinch/zoom in jquery mobile

Mobile
1

I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role=“page.” Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>jQuery Mobile Web App</title>

<meta content=“width=device-width, initial-scale=1, maximum-scale=2” name=“viewport”>

<link href=“jquery.mobile-1.0a3.min.css” rel=“stylesheet” type=“text/css”/>
<script src=“jquery-1.5.min.js” type=“text/javascript”></script>
<script src=“jquery.mobile-1.0a3.min.js” type=“text/javascript”></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework… –>
<script src=“/phonegap.js” type=“text/javascript”></script>
</head>
<body>

&lt;div data-role="page" id="page"&gt;
&lt;div data-role="header"&gt;
&lt;h1&gt;Page One&lt;/h1&gt;
&lt;/div&gt;
&lt;div data-role="content" style="padding:0;"&gt;
       &lt;img src="coffee.gif" width="320" height="480" alt="coffee"&gt;
    &lt;/div&gt;
&lt;div data-role="footer"&gt;
&lt;h4&gt;Page Footer&lt;/h4&gt;

</div>
</div>
</body>
</html>

Thanks so much in advance for any help.

2

jQuery Mobile is great but does cause a few small road bumps. When it is rendered it adds the following:

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

You need to change the maximum-scale value so you can zoom in.

You should be able to reset it using this:

$(document).bind(‘mobileinit’, function(){
$.mobile.metaViewportContent = ‘width=device-width’;
});

Good luck!

3

awesome. Thanks hifigrafix! Much appreciated!

4

Ok just to let you all know I am not a programmer but I am familiar with DW 5.5

I am designing my first mobile app…Well Im using jquery mobile that is bundled with DW CS5.5.

How would I render the code so that I could zoom and out of images that appear in my app.

5

I meant to say pinch zoom images