support different screen size in phonegap/jquery mobile

Question

In android we have layout_weight and layout_height to set the width and height of an image/layout, So when we have different screen size it automatically adjust to the screen width and screen height which we have specified.

Is their anything similar to it in phonegap/jquery mobile?.

I want to have a header and footer and a image in between. I tried adding header in css. but the image is repeating in header and also the entire screen is scrollable but i want a fixed image in the screen and i want to make images to adjust automatically to screen size of the device. I am new to phonegap and jquery mobile.

How can i make image fixed in between header and footer and adjust automatically to different screen size?.

Here is html page

<div data-role="page" id="timer">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false" class="timerheader">
        <h1></h1>
     </div>
     <div data-role="content">
        <p><centre><img src="Image/timer.png" alt="" /></centre></p> 
     </div>
     <div data-role="footer" data-position="fixed" data-tap-toggle="false"   >
        <h3><a href="#" data-role="button" data-inline="true" ><img src="Image/Next.png"/></a></h3>
     </div>
</div>

Thanks:)

Answer 1

This is a little bit tricky in jQuery Mobile, while page width is always the same page height will vary from page event to page event. I don't know how much do you know about jQuery Mobile page events, to make story short those events will occur during to page load and during the page transitions (if you want to find out more take a look at my other article: jQuery Mobile: document ready vs page events).

Now lets get back to your question. jQM page content will never take full page content unless there's already enough content filling it and we cant take pure css approach with 100% width and 100 % height.

To solve this problem we need to force content div to take full available page content height, and it can be done with this function:

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

We will use this function to set content height during the pageshow page event. And image will have width 100% and height 100%.

Now we also need to fix image css so it will properly fit full content height:

html,body{height:100%;}

img {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow-y: hidden !important;
}

.ui-content {
    padding: 0 !important;
}

.ui-content img {  
    max-height: 100%;/* Part 1: Set a maxium relative to the parent */
    width: auto\9;
    /* IE7-8 need help adjusting responsive images */
    max-width: auto; 
    /* Part 2: Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

And finally here's a working example: http://jsfiddle.net/Gajotres/yndsW/

EDIT :

Take a look at my another approach. Instead of using img tag I have decided to use background image and let css to handle centering. Javascript is only needed to dynamically change image.

We still need javascript to fix our page height.

HTML :

<div data-role="page" id="Windage">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3>Header</h3>
    </div>


    <div data-role="content">

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            <a href="#" data-role="button" data-inline="true" data-transition="slide">NEXT</a>
        </h3>
    </div>
</div>

CSS :

html,body{
    height:100%;
}

.ui-content {
    background-repeat:no-repeat;
    background-size:contain;  
    background-position: center center;
}

Javascript :

$(document).on('pageshow', '#Windage', function(){       
    $('[data-role="content"]').height(getRealContentHeight());
    $('.ui-content').css('background-image','url(Image/timer.png)');    
});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

Answer 2

I know one of the solutions. It is not perfect but it works really nice. You can specify different css files for each resolution and use mediaqueries. Mediaqueries will replace your css code depending on some rules you can specify, for example depending on screen resolution. It works very well with PhoneGap and jQM. Check it here and read official w3 documentation.

I hope it helps.