Enabling viewport pinch-zoom in Phonegap Android application has no effect

Question

I need to be able to turn pinch-zoom on and off using the viewport setting on my Android PhoneGap app.

But I'm unable to get viewport to affect pinch-zooming at all when using PhoneGap. I cannot turn on Pinch-zoom in PhoneGap, but when browsing with the Android Native browser to the webpage everything works fine.

I have spent a lot of time searching for a solution, without any result.

I created a very simple index.html for testing, having viewport setting like:

<meta name="viewport" content="user-scalable=yes" />

As some has suggested I have also tried the viewport:

<meta name="viewport" content="user-scalable=1" />

Other solutions for Android PhoneGap would be to enable Android Native Pinch-Zoom which have been suggested here: zoom in phonegap for android But this will not work for me, since I need to be able to control the pinch-zoom from javascript. I.e. I need to be able to use javascript to change the viewport setting, to control when pinch-zoom is available (user-scalable=yes / user-scalable=no)

Please observe that other viewport settings like "initial-scale" and "target-densitydpi" seems to work fine. For example setting initial-scale=2 starts the app zoomed.

(I'm currently testing pinch-zoom on PhoneGap 1.4.1 and HTC Desire HD Android 2.3.3)

I'm beginning to think I have missed something obvious, since I find so little information about similar problems...

The minimal index.html:

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="user-scalable=yes" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Minimal AppLaud App</title>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
      <script type="text/javascript" charset="utf-8">

        var onDeviceReady = function() {
            document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
        };

        function init() {
            document.addEventListener("deviceready", onDeviceReady, true);
        }   
      </script>  

  </head>
  <body onload="init();" id="stage" class="theme">
    <h2>Minimal AppLaud App</h2>
    <p> LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE </p>

    <p><span id="devready">onDeviceReady not fired.</span></p>

  </body>
</html>

Appreciate any ideas that you might have!

possible duplicate of Pinch Zoom in Android with Phonegap and jQUERY Mobile — Rowland Shaw

traceyspencer traceyspencer · Accepted Answer · 2012-10-23T13:19:29

Are you using PhoneGap Build? It is not possible with PhoneGap Build.

With Desktop PhoneGap, if you haven't already, follow the PhoneGap Getting Started with Android Guide and set your code up in an Eclipse Project.

Once set up, edit your Main Java file, as in the getting started guide: Add the following imports:

import android.webkit.WebSettings; 
import android.webkit.WebSettings.ZoomDensity;

Below the 'super.loadUrl("file:///android_asset/www/index.html");' line that you put in, as part of the start up guide, add:

settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);

Clean and build your project - zooming should now be allowed.

To restrict how far users can zoom in, add a meta tag, like the one below to every HTML page:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">

Enabling viewport pinch-zoom in Phonegap Android application has no effect

6 Answers