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 to fit the whole screen. It always leave a blank space and that's not what I would want. PhoneGap doesn't seem to pay attention to my viewport property in the metatag I am using.

I have been doing some tests to find out the problem without any kind of result.

For example, the following test just contains two files: index.html and config.xml

It contains a DIV that is 276 pixels width and I would want PhoneGap to make it fit the whole page as the Android browsers do.

By the way, I am using PhoneGap Build web site to build this test online.

Here is the content of the index.html file (I am not using DOCTYPE to make it simpler but even using it won't work properly):

<html>
    <head>
        <meta name="viewport" content="width=276, user-scalable=yes" />
        <title>Title</title>
    </head>
    <body>
        <div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
    </body>
</html>

And this is the content of the config.xml file (note the preference EnableViewportScale set to "true", but even being set to "yes" won't work):

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.phonegap.example"
        versionCode="10" 
        version   = "1.0.0">

    <!-- versionCode is optional and Android only -->

    <name>PhoneGap Example</name>

    <description>
        An example for phonegap build docs. 
    </description>

    <author href="https://build.phonegap.com" email="support@phonegap.com">
        Hardeep Shoker 
    </author>

    <preference name="EnableViewportScale" value="true" />
</widget>

So that is. Is there anything that I am doing wrong? How can I archieve what I am trying to do? I am sure it should have a pretty simple solution but I can't find it right now.

Thank you very much in advance and sorry about my English, it's not my native language.

Cheers, Joan

yves

Try

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

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

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

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

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-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />

<uses-sdk android: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.

来源：https://stackoverflow.com/questions/15925836/make-content-to-scale-and-fit-with-phonegap-using-viewport

标签

html

css

cordova

viewport

metatag