I thought that by simply adding “user-scalable=yes” to the meta tag it would enable my pictures to be pinch/zoom scalable. But such was not the case. Something more was needed, and iScroll4 supplied the missing functionality. What’s extra nice is that doesn’t need Jquery. Here are the simple steps I took to enable my pictures to have pinch/zoom. This was tested on a Nexus 7.
Instructions were taken from:
http://cubiq.org/iscroll-4
1. On the page where you want scrolling, make sure the viewport line in the <head> section allows scaling by adding user-scalable=yes:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
2. Download iscroll4 from http://cubiq.org/iscroll-4
3. Unzip, then open iscroll-4/src and copy iscroll.js to your project’s javascripts folder.
3. Copy and paste the contents to just after the last <script> in the <head> section:
<script type="application/javascript" src="../javascripts/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ zoom:true, zoomMax: 4 });
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
3a. Change the following to the correct location of your iscroll.js file:
<script type="application/javascript" src="../javascripts/iscroll.js"></script>
3b. You can change the maximum zoom allowed in the zoomMax section. “zoomMax: 4” means it will zoom to 4x the size.
4. Just above the </body> tag add the following line to execute, or call, the function:
<script>loaded();</script>
5. Now make a div with id=”wrapper” (or apply the id=”wrapper” to an existing div) that encloses the picture you want scalable. Or change “wrapper” in the function to an id you are already using.
I did this so only the image scales:
<div id="wrapper" style="width:100%"> <img src="../kit-images/blueprint.jpg" width="800" alt="" style="max-width:100%; height:auto;"> </div>
Now do a Project > Clean in Eclipse, and test in a device.
The content in the “wrapper” div will be scrollable AND scalable as though inside a frame. If the user needs to scroll to information below the div, he’ll need to be able to touch somewhere around the div to scroll beyond.
You might find it advantageous to add -webkit-transform:translate3d(0,0,0) to see if the area scales more smoothly. Unfortunately, it uses more resources, so test. Add the following above the </head> tag:
<style type="text/css">
div#wrapper img { -webkit-transform:translate3d(0,0,0) }
</style>
Zooming More Than One Picture on a Page
I wanted to zoom more than one picture on the page, so I changed my code like this for three pictures.
The <head> script became the following, duplicating the function as many times as there were pictures, and appending a digit after each function name (in two places) and wrapper name (in one place) within the <script> tags:
<script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper', { zoom:true, zoomMax: 4 }); } function loaded2() { myScroll = new iScroll('wrapper2', { zoom:true, zoomMax: 4 }); } function loaded3() { myScroll = new iScroll('wrapper3', { zoom:true, zoomMax: 4 }); } document.addEventListener('DOMContentLoaded', loaded, false); document.addEventListener('DOMContentLoaded', loaded2, false); document.addEventListener('DOMContentLoaded', loaded3, false); </script>
The script above the </body> tag received two more lines:
<script>loaded();</script> <script>loaded2();</script> <script>loaded3();</script>
And each picture had its own id:
<p style="color:blue; font-style:italic;">(Double-tap to enlarge pictures.)</p> <div id="wrapper" style="width:100%"> <img src="../kit-images/radio-installation-2.jpg" width="813" alt=""></div><br> <div id="wrapper2" style="width:100%"> <img src="../kit-images/radio-installation-3.jpg" width="813" alt=""></div><br> <div id="wrapper3" style="width:100%"> <img src="../kit-images/radio-installation-4.jpg" width="793" alt=""></div>
iPhone Dev Log 
Didn’t you have problems with vertical scrolling? Just implemented iScroll and it works perfectly, but it broke the vertical scrolling.
I only activated that one feature in the article. Worked fine!
you have corrected the problem of the vertical scroll ???
In my html structure like this
….
Now where to assign id ?
Looks like WordPress refused to insert your HTML. I’m sorry. I suggest going to http://www.sitepoint.com and given them your issue.
pinch zoom doesn’t work in phonegap application