Phonegap: Image size and keypad issue

Question

I have been developing mobile app for android using Phonegap. I am facing difficulty with Screen DPI's and keypad display.

How can i use an image for various dpi's with various screen resolutions? And I want the screen to scroll when keypad appears.

I am using position:absolute and % for the width, height and font-size for the elements so that my app adjust based on the various screen sizes and orientation.

So, now i want the solution for keypad problem and image problem.

Answer 1

@media screen and (-webkit-device-pixel-ratio: 0.75) {
   #app-icon { background-image:url(pictures/ldpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/ldpi/brand-icon.png); }
}

/* Medium density (160), mdpi */
@media screen and (-webkit-device-pixel-ratio: 1) {
   #app-icon { background-image:url(pictures/mpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/mdpi/brand-icon.png); }
}

/* High density (240), hdpi */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
   #app-icon { background-image:url(pictures/hdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/hdpi/brand-icon.png); }
}

/* Extra high density (320), xhdpi */
@media screen and (-webkit-device-pixel-ratio: 2) {
   #app-icon { background-image:url(pictures/xdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/xdpi/brand-icon.png); }
}

You can go through orientation

ORIENTATION - and (orientation: landscape)

Device WIDTH and (min-device-width : 480px) and (max-device-width : 854px)

Example:

@media screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width : 640px) and (max-device-width : 960px) and (orientation: landscape) {
   /* Your style here */
}