Support for different screen sizes on the phone / jQuery mobile

Question

In android, we have layout_weight and layout_height to set the width and height of the image / layout. Therefore, when we have a different screen size, it automatically adjusts to the screen width and screen height that we specified.

Is there something similar to it in phonegap / jquery mobile ?.

I want to have a header and footer and an image between them. I tried to add a header to css. but the image is repeated in the title, and also the whole screen scrolls, but I want a fixed image on the screen, and I want the images to automatically adjust to the screen size of the device. I am new to phonegap and jquery mobile.

How can I make the image fixed between the header and footer and automatically adjust it to a different screen size?

Here is the 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 bit complicated in jQuery Mobile, while the page width is always the same, the page height depends on the event event of the page and page. I don’t know how much you know about the events on the jQuery Mobile page to tell a story about these events during page loading and during page transitions (if you want to know more, take a look at my other article: jQuery Mobile: the document is ready for events pages ).

Now back to your question. The content of a jQM page will never be filled with the full content of the page unless there is enough content in it and we cannot use a pure CSS approach with 100% width and 100% height.

To solve this problem, we need to force the content div to get the full available height of the page content, and this can be done using 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 the height of the content during the page event. And the image will have a width of 100% and a height of 100%.

Now we also need to fix the css image so that it matches the full height of the content:

 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 other approach. Instead of using an img tag, I decided to use a background image and let css handle the centering. Javascript is only necessary for dynamically changing the 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 very well. You can specify different css files for each permission and use mediaqueries. Mediaqueries will replace your css code depending on some rules that you can specify, for example, depending on the screen resolution. It works great with PhoneGap and jQM. Check here and read the official w3 documentation.

Hope this helps.