jquery mobile position fixed in windows phone 8 and viewport height

Question

I have a phonegap app with jquery mobile for styling. I am using the fixed footer for navigation. The footer however floats a few pixels above from the bottom of the page. I believe this is because the web control viewport height is less than the screen height (in an actual web page on WP8 this is fine since the space below the footer is filled by the address bar). Any ideas on how I can make the viewport height equal to the screen height.

I cannot use position:fixed because I need the footer to be visible while I scroll the content.

screenshot: http://imgur.com/ThHAx4k

Answer 1

@media screen and (orientation: portrait) {
 @-ms-viewport {
    width: 320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
 }
}

Answer 2

You can use this to get window height

function getDeviceDimention() {
    console.log("Device Dimention using PhoneGap");
    console.log("Width = " + window.innerWidth);
    console.log("Height = " + window.innerHeight);
}

Credits to K_Anas from here

You can use this to give your content container the appropriate height. But you have to listen for orientation change and change the height.

$(window).on('orientationchange', function(e) {
        if(e.orientation == 'portrait') {
           //window height is your height
        }   
        else if(e.orientation == 'landscape') {
          //window width is your height
       }
    }
});

Answer 3

You have to change viewport width for all 3 resolutions available in windows phone 8

below code will work for HTC windows phone 8x

Include meta tag in your head section.

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

Include below style in your head section

@media screen and (min-width: 640px) and (max-width: 1024px) and (orientation:portrait) {
    @-ms-viewport { width: 50%; }        
}

You need to write this for all 3 resolution available for windows phone 8. You might have to decrease width for higher DPI phones and increase width for lesser DPI phone.

viewport width for Nokia lumia 920 will be around 70-80% and for Nokia Lumia 820 it would be around 85-95%. But you need to find out min width and max width for both these phones.