title: Enabling viewport pinch-zoom in Phonegap Android application has no effect
body: <p>I need to be able to turn pinch-zoom on and off using the viewport setting on my Android PhoneGap app.</p>
  
  <p>But I'm unable to get viewport to affect pinch-zooming at all when using PhoneGap. <strong>I cannot turn on Pinch-zoom in PhoneGap, but when browsing with the Android Native browser to the webpage everything works fine.</strong></p>
  
  <p>I have spent a lot of time searching for a solution, without any result.</p>
  
  <p>I created a very simple index.html for testing, having viewport setting like:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=yes" /&gt;
  </code></pre>
  
  <p>As some has suggested I have also tried the viewport:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=1" /&gt;
  </code></pre>
  
  <p>Other solutions for Android PhoneGap would be to enable Android Native Pinch-Zoom which have been suggested here:
  <a href="https://stackoverflow.com/questions/4668344/zoom-in-phonegap-for-android">zoom in phonegap for android</a>
  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)</p>
  
  <p>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.</p>
  
  <p>(I'm currently testing pinch-zoom on PhoneGap 1.4.1 and HTC Desire HD Android 2.3.3)</p>
  
  <p>I'm beginning to think I have missed something obvious, since I find so little information about similar problems...</p>
  
  <p>The minimal index.html:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="user-scalable=yes" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Minimal AppLaud App&lt;/title&gt;
        &lt;script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" charset="utf-8"&gt;
  
          var onDeviceReady = function() {
              document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
          };
  
          function init() {
              document.addEventListener("deviceready", onDeviceReady, true);
          }   
        &lt;/script&gt;  
  
    &lt;/head&gt;
    &lt;body onload="init();" id="stage" class="theme"&gt;
      &lt;h2&gt;Minimal AppLaud App&lt;/h2&gt;
      &lt;p&gt; LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE &lt;/p&gt;
  
      &lt;p&gt;&lt;span id="devready"&gt;onDeviceReady not fired.&lt;/span&gt;&lt;/p&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Appreciate any ideas that you might have!</p>