Make Content To Scale And Fit With Phonegap (using Viewport)

I am trying to adapt and port an old project to PhoneGap. So far, the project works properly under Android browsers but it doesn't with PhoneGap since it doesn't adapt the content

Solution 1:

Try

<metaname="viewport"content="width=276, user-scalable=1" />

or If you add the following lines to your onCreate() method:

WebSettingssettings=this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);

or try using iScroll 4 (http://cubiq.org/iscroll-4) Pinch / Zoom

Solution 2:

I almost gave up, when I stumbled upon this post: http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html

Basicly I modified my default AndroidManifest.xml entry from:

<uses-sdkandroid:minSdkVersion="10"android:targetSdkVersion="19" />

to

<uses-sdkandroid:minSdkVersion="7" />

You may play with the version a lil bit. Just don't target version 19 I guess. Plus you may add

target-densitydpi=device-dpi
target-densitydpi=medium-dpi
...

To your meta viewport tag, depending on what you're trying to do.

---

EDIT: Ok, here's an exploanation: http://developer.android.com/guide/webapps/migrating.html Since Android 4.4 (KitKat), WebView has changed with new one based on chromium. By having target version below 19, webview is set in quirks mode.

Note: If your targetSdkVersion is set to "18" or lower, WebView operates in "quirks mode" in order to avoid some of the behavior changes described below, as closely as possible—while still providing your app the performance and web standards upgrades. Beware, though, that single and narrow column layouts and default zoom levels are not supported at all on Android 4.4, and there may be other behavioral differences that have not been identified, so be sure to test your app on Android 4.4 or higher even if you keep your targetSdkVersion set to "18" or lower.

PP: Using LG L70 phone.