Fetching the images based on screen resolution

      One  of the  main  issues in the  mobile web  application  is to  fetch  the  images  based on the  mobile  screen  resolution .  There  are  different  method to fetch  the  images  but  im here explain,   fetching the  image  based on the  screen  resolution.   Normally in the android  mobile  we  will  calculate the DPI(density per  inches) and  in the  iphone PPI(pixel per inches) . Here  im  taking the  screen  resolution.


    function getResolution()
    {
        window.imagePath ='';
        //get screen resolution of customer
        var custHeight = screen.height;
        var custWidth = screen.width;
        //if the  screed width  less  then  screen  height
        if( custWidth < custHeight)
        {    
            if (custWidth <=  320)
            {
                window.imagePath = 'drawable-mdpi';
            }
            else if (custWidth <= 480)
            {
                window.imagePath = 'drawable-hdpi';
            }
            else
            {
                window.imagePath = 'drawable-xhdpi';
            }
        }
        else
        {
            //else if the  screed width  greater  then  screen  height 
            if (custWidth <=  480)
            {
                window.imagePath = 'drawable-mdpi';
            }
            else if (custWidth <= 600)
            {
                window.imagePath = 'drawable-hdpi';
            }
            else
            {
                window.imagePath = 'drawable-xhdpi';
            }
        }    
    } 

Just  call  the getResolution() method  when  the  page  first  loads.  then use  the  window.imagePath anywhere in your  application. window.imagePath is the  global  varible  here.

This post  will really  help  you.  For  feed  back  leave  me comments.