css - supporting multiple resolution and density of images in phonegap

Question

I am new to phonegap and facing a problem, I am making a phonegap app which will run on multiple platform devices of different screen size and different screen resolution so I have to load images of different resolution depending on screen resolution.

this can be achieved in android by simply putting your images of different resolution in hdpi, mdpi and ldpi folder and it(android) fetches images automatically depending on devices screen resolution. But how to do this in phonegap.

I have seen lot of articles on responsive web design they all say about positioning the elements on web page but non of them has told about how to place images on the basis of screen resolutions.

thanks i advance.

edited question

i have used following code for html

<div id="header" data-role="header" data-position="fixed">
 <img alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left" />
 <img alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right" /><h1></h1>
</div>

now I have images inside assets/www/pictures folder. this folder consists of 2 images of same resolution app_logo.png and company_logo.png and 2 images of higher resolution app_logo_big.png and company_logo_big.png now through media queries i will know the screen size and apply the styles but as far as i know i cannot change img src from css. So now how will i use these images of different resolution

Answer 1

Then Dynamically Change Image through jquery:

HTML:

<div id="header" data-role="header" data-position="fixed">
   <img id="app-icon" src="pictures/app_logo.png" display="inline" />
</div>

Javascript:

$(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');  
  }
}

Through CSS: Use Media Queries for Different Resolution :

HTML:

<div id="header" data-role="header" data-position="fixed">
     <span id="app-icon"></div>
    <span id="brand-icon"></div>
 </div>

CSS:

/* Low density (120), mdpi */
@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); }
}

If you want to filter through,

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