Android screen resolution/density issue

[Phreemann]

Hi,

I'm just starting out with PhoneGap, so apologies in advance if this
is the sort of noob question that drives everyone insane, but it's
giving me no end of a headache.

I'm using a Nexus One and an Xperia X10 for my test devices, which
have screen resolutions of 480x800 and 480x854 respectively. I set up
my html and css working on a width of 480px and automatic height. It
displays fine in the PhoneGap simulator, but when I build it and
install it on my phone or run it with the Android emulator, everything
gets scaled up so that it doesn't fit the screen properly.

From searching and reading it seems the issue is caused by Android
assuming a default screen resolution of 160dpi. With the Nexus One and
X10 having screens of 240dpi, everything is scaled up by a factor of
1.5, since Android thinks this is necessary for the app to display
properly. Because of this, my app doesn't fit on the screen, and all
my images are horribly blurry.

Is there any way to prevent this automatic scaling? I've tried
changing the android:resizeable and android:anyDensity settings in the
manifest, to no avail. I tried changing my image dpi - no difference.
I'm at a bit of a loss. Obviously I can build my app to take account
of this, using a width of 320px, but that seems a poor solution to
what should be a trivial issue.

Is there any way to get round this issue, or are all my Android apps
destined to be scaled and blurry? Thanks in advance.

[Ben Freeman]

Made a quick demo app to show the issue I'm having. This demo app
displays a 480px by 480px image.

PhoneGap Simulator (Xperia X10, 480x854):
http://img96.imageshack.us/img96/1412/phonegapsim.jpg
Android Emulator (Android 1.6, 480x854):
http://img824.imageshack.us/img824/6233/androidemu.jpg

Both the actual Xperia X10 and the Nexus One display the same as the
Android Emulator. This is really frustrating...

[Dave Johnson]

check out this android article about how it handles sceen size / density

http://developer.android.com/guide/practices/screens_support.html

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

[Phreemann]

Thanks for the link, unfortunately I've been reading that page a lot
today. However, I've realised how to solve the issue anyway, just by
changing my html and css code method.

I was using background images in divs, which I couldn't set the size
of. I'm now using absolutely positioned images within divs, which I
can set sizes for. Then I changed all image sizes from px to
percentages, and since the rescaled images are either the same size or
slightly smaller than the originals, they display nice and crisp.

I guess it's just one of those things you have to learn in the
transition from being a web developer to developing for phones.
Problem solved. =)

[Björn Nilsson]

There is also the undocumented "target-densityDpi=device-dpi" viewport
attribute that can help with this:

<meta name="viewport" content="width=device-width, target-
densityDpi=device-dpi, user-scalable=no, initial-scale=1.0, minimum-
scale=1.0, maximum-scale=1.0"/>