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-width, 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

11
задан Community 23 May 2017 в 12:16
поделиться