Pinch Zoom in Android with Phonegap and jQUERY Mobile

Question

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

Answer 1

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.:

    

        
---
    
    

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

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