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.