1

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.

sonam
  • 875
  • 2
  • 18
  • 37
  • 2
    Add in header tag and read this link 1) http://view.jquerymobile.com/1.3.2/dist/demos/widgets/pages/ – Ved Oct 25 '13 at 14:19

1 Answers1

3

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() });
ezanker
  • 24,628
  • 1
  • 20
  • 35
  • Viewport description says, setting viewport in header will automatically handle height and width. But it doesnt work. So what is its actual significance? – sonam Oct 30 '13 at 04:44
  • 1
    The meta tag does not handle setting HTML element heights to fill the screen, rather it helps with determining how a page should look on a mobile device: should it be scaled down to fit, or should it be only partially visible, etc. see http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml for more. My answer assumed you were trying to get the content div to exactly fill the available height of the page, perhaps that was not what you were looking for... – ezanker Oct 30 '13 at 12:42
  • It worked very well for me. But this doesn't work on iPad. If I change the orientation in that case it shows zoomed in page and doesn't fit to the page. – sonam Nov 19 '13 at 11:59
  • Can you see if the orientationchange event is firing? parhaps add alerts to debug whether it is firing and what values you are getting for screen size... – ezanker Nov 19 '13 at 15:04
  • Event is getting fired. Scaling is working very well on android devices, the above problem is with iOs only. – sonam Nov 20 '13 at 04:09
  • Apparently ios7 ipad safari has a bug: http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue – ezanker Nov 20 '13 at 14:25