Geek Answers Handbook

Make content scalable and compatible with PhoneGap (using the viewport)

I am trying to adapt and migrate an old project to PhoneGap.

So far, the project works correctly in Android browsers, but it does not work with PhoneGap, since it does not adapt the content to fit the entire screen. He always leaves an empty space, and that’s not what I want. PhoneGap does not seem to pay attention to my viewport property in the meta tag that I use.

I did some tests to find out the problem without any result.

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

It contains a DIV with a width of 276 pixels, and I would like PhoneGap to let it fit the entire page, as Android browsers do.

By the way, I use the PhoneGap Build website to create this test online.

Here is the contents of the index.html file (I am not using DOCTYPE to make it simpler, but even using it will not 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 contents of the config.xml file (note that the EnableViewportScale parameter is set to true, but even if it is set to yes, this will not 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. Is there something I'm doing wrong? How can I archive what I'm trying to do? I am sure this should have a fairly simple solution, but I cannot find it right now.

Thank you in advance and sorry for my English, this is not my native language.

Cheers, Joan

+7
source share
2 answers

Try

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

or If you added 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

+1
source

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

I basically changed my default AndroidManifest.xml file:

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

to

 <uses-sdk android:minSdkVersion="7" />

You can play with the lil bit version. I think, do not aim at version 19. In addition, you can add

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

In the meto viewport tag, depending on what you are trying to do.

EDIT: Ok, here's the operation: http://developer.android.com/guide/webapps/migrating.html Starting with Android 4.4 (KitKat), WebView has changed from a new one based on chrome. With a target version below 19, webview is installed in quirks mode.

Note. If targetSdkVersion is set to 18 or lower, WebView operates in quirks mode to avoid some of the behavior changes described below as much as possible, while your application updates its performance and web standards. Beware, however, that single and narrow column layouts and zoom levels by default 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 check your application on Android 4.4 or later, even if you save your target setSdkVersion "18" or lower.

PP: use the LG L70 phone.

+1
source

More articles:


All Articles