Viewport sizing problem on android

digitsix

unread,

Nov 2, 2011, 3:12:36 AM11/2/11

to phonegap

This is my first android app and thus my first phonegap app.

Its really a great tool and I actually have my app completed except
for one nagging issue.

My designers gave me a layout that is 600px wide and so I designed the
app to be 600px wide.

I read on the android sdk docs regarding webview that you can use the
meta tag "viewport' to specify the viewport width. I put the meta tag
in:

<meta name="viewport" content="width=600" />

It does not work. In fact NO width value I put in there has any effect
on anything.

The only properties that seem to have an effect are target-densityDpi
and the scaling properties. These however will not help me achieve
true x-device / x-platform uniformity! I can make it look good in one
resolution but then it looks bad in other resolutions.

What I dont understand here is that if the docs say this should work
this way, why doesn't it? What am I missing exactly?

Simon MacDonald

unread,

Nov 3, 2011, 11:38:41 AM11/3/11

to phon...@googlegroups.com

Try adding the following two lines to the onCreate() method of the
Java class that extends from DroidGap.

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

Let me know if that works for you. Also, you probably should design
for a specific width. Your UI will be very fragile as the user goes
from portrait to landscape and phone to tablet. A great read on the
subject of responsive design can be found here for $9 in eBook format.

http://www.abookapart.com/products/responsive-web-design

Simon Mac Donald
http://hi.im/simonmacdonald

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com
>

digitsix

unread,

Nov 3, 2011, 4:55:22 PM11/3/11

to phonegap

Thank you! This worked to fix my issue, however I'm now having one
last problem.

Input Focus Zoom....

The app displays great on all resolutions now, except when you click
the input box the viewport zooms in on the input box and there it
stays for the rest of execution time. There is no way to zoom it back
out.

I have tried the "android:windowSoftInputMode="adjustPan"" in the
manifest/activity

I have tried (in onCreate) the hack:
this.appView.getSettings().setBuiltInZoomControls(false);
this.appView.getSettings().setSupportZoom(false);
this.appView.getSettings().setDefaultZoom(ZoomDensity.FAR);

I tried them independently and together. No effect. Any ideas?

On Nov 3, 10:38 am, Simon MacDonald <simon.macdon...@gmail.com> wrote:
> Try adding the following two lines to the onCreate() method of the
> Java class that extends from DroidGap.
>
> this.appView.getSettings().setUseWideViewPort(true);
> this.appView.getSettings().setLoadWithOverviewMode(true);
>
> Let me know if that works for you. Also, you probably should design
> for a specific width. Your UI will be very fragile as the user goes
> from portrait to landscape and phone to tablet. A great read on the
> subject of responsive design can be found here for $9 in eBook format.
>
> http://www.abookapart.com/products/responsive-web-design
>

> Simon Mac Donaldhttp://hi.im/simonmacdonald

Simon MacDonald

unread,

Nov 4, 2011, 9:47:10 AM11/4/11

to phon...@googlegroups.com

Try this meta tag in your HTML: