Windows Phone screen height in PhoneGap app not 100%

Question

I\'m developing a Windows Phone app using PhoneGap/Cordova (though, I believe the problem I\'m having makes the fact that it\'s PhoneGap irrelevant). No matter what I seem t

Answer 1

I tried using device-height in the viewport meta tag, however I learned that IE doesn't support that tag. Then after my 100,000 google search, I found this page.

After adding this to my CSS:

@viewport{height:device-height}
@viewport{width:device-width}
@-ms-viewport{height:device-height}
@-ms-viewport{width:device-width}

and adding this to a JavaScript file that hits all of my pages:

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );

    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{height:device-height!important}"
        )
    );

    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}

Then my 100% body height started acting the way that I would expect it to.

Answer 2

In your MainPage.xaml file, change

shell:SystemTray.IsVisible="True"

to

shell:SystemTray.IsVisible="False"

Answer 3

The overflow is a weird IE10 WebBrowser control thing. If you change the background color of the body you will see that both above and below your div are the background color.

Here is a simple workaround:

document.addEventListener("DOMContentLoaded", function () {
    var div = document.querySelector(".navbar_table_container");
    div.style.top = (div.offsetTop + div.offsetHeight + 4) + "px";
});

Answer 4

it seems that the key is width property in -ms-viewport, so a simpler solution would be:

// put this in body or after body as it uses document.body.offsetWidth.
if (/IEMobile\/10\.0/.test(navigator.userAgent)) {
    document.write('<style>@-ms-viewport { width: ' + document.body.offsetWidth + 'px; }</style>');
}