Phonegap Android捏放大

Question

I am developing Android Application using jQuery Mobile and Phonegap. I want to enable pinch zoom on App pages. So many solutions suggested to use following line, but it isn't working -

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

Is there any perfect solution for zooming App pages on pinch or on double click the page ? Thanks.

Answer 1

i´ve been dealing this problem for years. In all this time i just found a kind of solution.

You can create the image you want to zoom in two or more sizes. By the function show and hide found for Jquery at W3Schools(ShowHide) you can manage one to hide and the other one to show on tap above each one on display.

It did work for me, although it does not enables zoom by pinch gesture it is an easy and robust way to show details from images using phonegap.

Here is how i did it using only JS.

Introducing script on the header:

<script type="text/javascript">
function ampliar() {
        var e = document.getElementById("granderizable");
          if(e.style.display == 'block')
            e.style.display = 'none';
          else
            e.style.display = 'block';}
</script>

calling on images in the body:

<pec><a href="#" onClick="ampliar();"><img src="001.jpg" width="400" height="250" /></a></pec>
<gran id="granderizable" ><a href="#" onClick="ampliar();"><img src="001ZOOM.jpg" width="1280" height="800" /></a></gran>

Function ampliar looks for the Html element in the body whos id is granderizable and changes his style display value (Displayed or not displayed).

This function is activated when clicking on any of the images. When taping pec ,the small view image, its sets on diplay gran . This image, bigger, overlaps the small one. Taping again on it would alternate its display value and banish it from the view of the app user allowing him to his prior view with the small image.