Pinch Zoom in Android with Phonegap and jQUERY Mobile

I have been having difficult getting pinch zoom to work in the webapp I am creating with Phonegap. Currently, I am loading information into a p tag view a remote script, but the html goes out of the confines of the screen (of course going to landscape mode fixes this).

Not matter, what I try I can't get pinch zoom to work or even a horizantal scrollbar to appear. I tried adding <meta name="viewport" content="width=device-wi开发者_如何学Cdth, height=device-height, initial-scale=0.8, user-scalable=1" /> in the header.

I think the problem may be that I am using jquery mobile, but trying the following solution did not work either:

$(document).bind("mobileinit", function(){
      $.mobile.metaViewportContent = "width=device-width, minimum-scale=1, maximum-scale=2";
});

(added before jquery mobile js file inclusions).

EDIT: Scrolling to the right when content overflows works fine in Ripple emulator.

---

UPDATE: Okay - edited my app.java and I am able to zoom now. However, I am only able to zoom in, not zoom out, indicating that the initial zoom is set to 1 I guess. Anyone have any suggestions as to how to zoom out or set up a horizontal scroll bar?

package com.phonegap.Sample;

import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;
import android.webkit.WebSettings;

public class Sample extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{


    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html");

    WebSettings ws = super.appView.getSettings();
    ws.setSupportZoom(true);
    ws.setBuiltInZoomControls(true); 

}
}

source

---

I realize this post is old, but here's to anyone else googling their way into the post:

Horizontal zoom is actually not available for any content except within the body - for both iOS and and Android to my knowledge. Try creating a new app with a div and try to make overflow:auto give you anything. There's ScrollView being implemented into jQuery Mobile, and there's iScroll. Neither works well if u want form elements to be within the scrollable area.

As to zooming out farther than the actual content, I don't think it's unreasonable it actually locks you in. There's nothing outside the body which can be showed, imagine how a background color or image would be clipped - not nice at all!

---

Using the OP code and additional resources, found working zoom solution with splashscreen and a couple "gotcha's" to look out for.

Gotcha #1: If you use data-position="fixed", you will lose your pinch zoom feature (tested in Android 2.3.1 SDK 9) i.e.:

    <div data-role="footer" data-position="fixed">
        <h1>---</h1>
    </div>
    <!-- /footer -->

Gotcha #2: If you use "target-densitydpi=device-dpi" header meta name="viewport", your scaling will be uniquely different - so use or don't use consistently across all pages.

Here's my working Snippets:

org.packagename/src/MainActivity.java

    package com.packagename;

    import android.os.Bundle;
    import android.webkit.WebSettings;
    import org.apache.cordova.*;
    public class MainActivity extends DroidGap {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            super.setIntegerProperty("splashscreen", R.drawable.splash);
            super.setStringProperty("loadingDialog", "Starting your app...");
            super.loadUrl("file:///android_asset/www/index.html", 1500);

            WebSettings settings = super.appView.getSettings();
            settings.setBuiltInZoomControls(true);
            settings.setSupportZoom(true);
            //settings.setDefaultZoom(ZoomDensity.FAR);    
        }
    }

res/drawable/splash.xml

    <?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
      android:src="@drawable/splashimage"
      android:gravity="center_horizontal|center_vertical" />

res/drawable/splashimage.png (Made with Draw 9-patch from launcher icon png w/alpha)

---

binding the component to be pinched with gesture event can be done. e.g.

var con=document.getElementById('containerId');

con.addEventListener('gesturechange',function(e){
    if(e.scale>1)
    {
        //zoom in 
    }
    else if(e.scale<1)
    {
        //zoom out 
    }
});