Supporting Multiple Resolution and Density of Images in Phonegap

supporting multiple resolution and density of images in phonegap

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

Support multiple resolution Images in Phone gap with different size

The solution you used will work for different resolutions. like normal and retina display. If you want to change image sizes according to device sizes(but same resolutions) you can use CSS 3 media queries and apply different css on different size devices.

your css will go under something like this-

 @media screen and (min-device-width : 480px) and (max-device-width : 854px){
//css for devices whose width is more than 480px but less than 854px
}

you can use combination of width and resolution media queries as well.

Please search for adaptive web design and media queries you will get a lot of stuff.

Support multiple resolution Images in Phone gap with different size

The solution you used will work for different resolutions. like normal and retina display. If you want to change image sizes according to device sizes(but same resolutions) you can use CSS 3 media queries and apply different css on different size devices.

your css will go under something like this-

 @media screen and (min-device-width : 480px) and (max-device-width : 854px){
//css for devices whose width is more than 480px but less than 854px
}

you can use combination of width and resolution media queries as well.

Please search for adaptive web design and media queries you will get a lot of stuff.

Phonegap - Best way to support multiple resolutions

Since you are using Phonegap, I would use a mobile framework, like jQuery Mobile, Sencha Touch, etc. These frameworks handle this for you, and enable responsive layout. Your friend's opinion seems a bit unfounded. I'm using jQuery Mobile and it has worked on every mobile device I've tested on: Galaxy Nexus, iPod touch, iPad, and Kindle. My app is very large and complex, and no where in my code do I zig or zag based on screen size. I have a single CSS file, and it supports several themes as well.

Why don't we have to make images for more resolutions when building responsive web site?

A solution to do this has been proposed some time ago now, as it is a totally relevant use-case.

The answer to your question about "why we don't have to do this" would be, "we do have to do this", as pixel density differs on bigger screens too and especially for responsive pages, there is need to provide different pictures (not just different resolutions) that fit the content better (commonly referred to as art direction based selection).

This is why the <picture> - element (link to w3c HTML spec) exists and has added support for various attributes like media-queries, multiple sources and srcsets for different screen densities, as we use them on mobile pages.

Additionally, srcset and sizes - attributes exist for the <img>-tag as well.

This page (usecases.responsiveimages.org) describes the different use-cases for this.

The "right" approach will always depend on what you want to achieve, but at least offering different resolutions for varying pixel-ratios should be a standard in my opinion.

So these elements and attributes give you tools to select your image based on

• device-pixel - ratio
• viewport
• context (completely different pictures, not just resolution)
• image-format

and you should make use of these tools, no matter what device you're targeting.

Note that the browser support for the picture-element is getting better and better, but is not complete now (at the time of this writing, only Chrome and Opera have it fully implemented when it comes to Desktop - Browsers, Firefox has it implemented but still locked behind a flag, this should change with FF 38). There is a fairly well working polyfill though (https://github.com/scottjehl/picturefill)

tl;dr We really should do this, no matter what device and modern browsers give us very competent tools for doing so.

how to determine the screen resolution using phonegap?

You can also use $(window).width() and $(window).height() or screen.width; and screen.height;

Here is an example of this implementation using HTML, Javascript and JQuery mobile.

HTML PAGE:

<html>
    <head>
        <!-- put any jquery references here -->
        <script type="text/javascript" src="index.js">
    </head>
    <body>
        <div id=main_page">
        </div>
    </body>
</html>

Javascript file with JQuery:

$(document).ready(function ()
{
   resolution_handling();
});

function resolution_handling() 
{
    //first way to implement
    browser_width = $(window).width();
    browser_height = $(window).height();
    $("#main_page").css("width":browser_width+"px");
    $("#main_page").css("height":browser_height+"px");

    //second way to implement
    browser_width = screen.width;
    browser_height = screen.height;
    $("#main_page").css("width":browser_width+"px");
    $("#main_page").css("height":browser_height+"px");
}

Both of the implementations will make the div main_page have the dimensions of the screen's height and width.

I recommend using $(window).width() and $(window).height() as from experience it has been more stable than screen.width; and screen.height;

how to use images on different devices on different resolution?

Use CSS3 media queries to detect the phone dimensions and use the correct styling. An example is available in this question: PhoneGap + Android + media queries

See also "How to use CSS3 media queries to create a mobile version of your website".

Example (in your HTML)

<link rel="stylesheet" type="text/css" media="(max-width: 480px) and (max-device-width: 480px)" href="screen-small.css" />

---

Related Topics