Dynamically assign height to jquery mobile page based on device

Question

I am new to jquery mobile. I am writing a mobile app and I want it to dynamically fit the content of the data-role="page" to the screen size on all devices. What is the efficient way to do it? I read about viewport which has to be set in header. What role does it play while adjusting height and width of the page?

Thank you.

Answer 1

Here is a jsFiddle: http://jsfiddle.net/ezanker/Tx4kF/

After the meta viewport mentioned by Ved, use javascript to calculate the available height for the content pane:

function ScaleContentToDevice() {
   scroll(0, 0);
   var headerHeight = $("#jqmHeader:visible").outerHeight();
   var footerHeight = $("#jqmFooter:visible").outerHeight();
   var viewportHeight = $(window).height();

   var content = $("#jqmContent:visible");
   var contentMargins =  content.outerHeight() - content.height();

   var contentheight = viewportHeight - headerHeight - footerHeight - contentMargins;

   content.height(contentheight);
}

This assumes you have no margin or padding on the body/html:

html, body {
   margin: 0;
   padding : 0;
}

Perform the scaling on the pageshow event as well as orientation change / resize.

$(document).on("pageshow", function(){
   ScaleContentToDevice();
});
$(window).on('resize orientationchange', function(){ ScaleContentToDevice() });