Handling ldpi/mdpi/hdpi on Android/Phonegap on my own

[Caspar]

Hello everyone,

i want to handle the different display densitys on my own because my app will be image heavy and i do not want to have all images scaled by phonegap/webview. So i added this to the index.html to remove automatic scaling (like shown in http://developer.android.com/guide/webapps/targeting.html):

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

and handle now my own stuff on my own via css/@media. To make sure that all the sencha touch elements get scaled properly i added this to my style.css:

/* CSS for medium-density screens, already in sencha-touch.css
body.x-android.x-phone {
  font-size: 116%;
}*/

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens 116% * 1.5 = 174% */
    body.x-android.x-phone {
        font-size: 174% !important;
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens 116% * 0.75 = 87% */
    body.x-android.x-phone {
        font-size: 87% !important;
    }
}

Is this the recommended way to do it? To have my sencha touch UI elements stay roughly the same size on different devices and being able to use 1:1 pixel mapping for my own images&content without the webview messing them up? I've read http://www.sencha.com/blog/resolutio...ent-mobile-ui/ thats where i got this idea...

Cheers

Caspar

[venkatesh.R]

Hi,

How to handle different density screens( ldpi/mdpi/hdpi) on android in mobile packager for native application.