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 */
}

Answer 2

you need to implement conditional code for that for what device u are creating application ,in android there are multiple device we have so you need to check whether it is hd device or full hd as per you need to create image size and place into respectable folder so please check your deivce pixel ratio .

if(window.devicePixelRatio == 1.5) {

"HD device "
} 
 else if(window.devicePixelRatio == 2) {


}

so you can check from above code device pixel ratio and you can apply images as per the device in if condition.

Answer 3

$(document).ready(function () {
  if(window.devicePixelRatio == 0.75) {
     $("#app-icon").attr('src', '/images/lpdi/app-icon.png');   
  }
  else if(window.devicePixelRatio == 1) {
           $("#app-icon").attr('src', '/images/mdi/app-icon.png');  
  }
  else if(window.devicePixelRatio == 1.5) {
     $("#app-icon").attr('src', '/images/hpdi/app-icon.png');   
  }
  else if(window.devicePixelRatio == 2) {
              $("#app-icon").attr('src', '/images/xpdi/app-icon.png');  
  }
}