View Full Version : Handling ldpi/mdpi/hdpi on Android/Phonegap on my own

28 Jan 2012, 3:06 AM
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 (http://developer.android.com/guide/webapps/targeting.html%29:)):

<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/resolution-independent-mobile-ui/ thats where i got this idea...



21 Feb 2013, 10:55 PM

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