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: https://i.stack.imgur.com/ZER0J.jpg

score 5 · Accepted Answer · answered May 17 '13 at 23:41

5

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

answered May 17 '13 at 23:41

darkphantum

521
5
13

Works great on my phone, but does this work ok for all available resolutions? – Michielvv Jul 26 '13 at 11:08
Worked great for me, but I changed it to include height:534px; or I still got a small gap. The next problem is allowing UL to scroll but not move the header or footer when it does, as WebUIBounce tricks don't appear to work on IE10. – GilesDMiddleton Aug 15 '13 at 10:19
@darkphantum, thanks a lot buddy... was looking for solution since long time..! – Sushant Sep 19 '14 at 07:07

score 2 · Answer 2 · edited May 23 '17 at 12:24

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
       }
    }
});

score 2 · Answer 3 · answered Jun 27 '13 at 16:39

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.

jquery mobile position fixed in windows phone 8 and viewport height

3 Answers3