Screen scaling issues with phonegap app on Windows 10 Mobile

327 Views Asked by At

I have a Phonegap Build app that is working fine on iOS, Android and win-8.1. On windows 10 mobile there is the following problem:

When the phone is tilted in the landscape mode the screen scaling/zooming goes wrong. The page is too large and does not fit the screen. The page has the following values:

window.innerWidth/innerHeight: 320 x 180
document.documentElement.scrollWidth/scrollHeight: 375 x 569
document.documentElement.clientWidth/clientlHeight: 320 x 569

The problem is that the scrollWidth is larger than viewport and the page displays too large.

Is anyone experiencing the same problem? Is there a solution to this?

1

There are 1 best solutions below

1
On

Seems to be an issue other people are having. I found this question on Stack Overflow with the original poster showing trying their solution: Windows Phone 8 Viewport issue

Copy/paste just in case:

(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode("@-ms-viewport{width:auto !important}")
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();