I have been developing some proof of concept Sencha Touch demo's for myself, but one thing that seems to fail is the resolution independence on Android. On iOS every screen seems to scale correctly (iPhone 3G vs iPhone 4) and the screen looks the same. Everything is rendered even more beautiful than I could imagine. On Android however everything seems ugly and GUI controls become unusable on higher resolutions. When testing I use my Motorola Atrix 4G (on Android 2.3.4, 960x540 display), an Android AVD (480x320 display) and another AVD with a 800x480 display. I have attached a picture that displays the difference on the three displays.

My questions:
On iOS: does the browser take care of scaling/rendering correctly? Or does Sencha Touch have some Retina Magic to accomplish this?

On Android: Is there a simple way to use some conditional CSS for rendering in a different font-size for every resolution? I tried using viewport target-densitydpi=medium-dpi, but it did not seem to make any difference (probably because sencha/phonegap creates extViewportMeta with width=device-width, initial-scale=1.0).resolution.jpg

And is it just me or does everything webkit-related render crappily on an Android?

Edit: 480x320 => 800x480 scaling works with this html:
<meta name="viewport" content="initial-scale=1.0, width=320, target-densitydpi=medium-dpi "/>

On 540x960 (both on my Atrix and Emulator with qHD) the sizes seem to be calculated as if the screen were a 480x800 screen...
Also: I swapped values on in the picture on 320x480, sorry!

Below are the renderings on 800x480 and 960x540. The 800x480 is identical to the 480x320 rendering on Android and the 480x320 rendering on the iPhone.

emu960rainbow.jpgemu800rainbow.jpg