javascript - support different screen size in phonegap/jquery mobile -

in android have layout_weight , layout_height set width , height of image/layout, when have different screen size automatically adjust screen width , screen height have specified.

is similar in phonegap/jquery mobile?.

i want have header , footer , image in between. tried adding header in css. image repeating in header , entire screen scrollable want fixed image in screen , want make images adjust automatically screen size of device. new phonegap , jquery mobile.

how can make image fixed in between header , footer , adjust automatically different screen size?.

here 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:)

this little bit tricky in jquery mobile, while page width same page height vary page event page event. don't know how know jquery mobile page events, make story short events occur during page load , during page transitions (if want find out more take @ other article: jquery mobile: document ready vs page events).

now lets question. jqm page content never take full page content unless there's enough content filling , cant take pure css approach 100% width , 100 % height.

to solve problem need force content div take full available page content height, , can done 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 use function set content height during pageshow page event. , image have width 100% , height 100%.

now need fix image css 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 maxium relative parent */     width: auto\9;     /* ie7-8 need adjusting responsive images */     max-width: auto;      /* part 2: scale height according width, otherwise stretching */     vertical-align: middle;     border: 0;     -ms-interpolation-mode: bicubic; } 

and here's working example: http://jsfiddle.net/gajotres/yndsw/

edit :

take @ approach. instead of using img tag have decided use background image , let css handle centering. javascript needed dynamically change image.

we still need javascript 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; }