Website not scrolling in Windows Phone

Question

I have made a responsive website integrated with nodejs, which works fine on all devices.

But in the Windows Phone IE browser, the webpage is not scrolling down, I don't know what's causing this.

/*css*/
@media (max-width: 400px) {
    @-ms-viewport {
        width: 320px;
    }
}

/*js*/
if (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);
}

The responsiveness had some issues on Windows Phone, so I used the above code patches to fix the issue. But the scrolling issue remains, do someone know how to fix this?

Answer 1

The Fix

Going off of a couple of sources, it seems the hotfix you have put in actually now causes some devices to render improperly (and was recognized as a bug, so it shouldn't happen in later versions...)

Implementing the following should remove the querks you are experiencing:

/*CSS*/
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

/*Javascript*/
if (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);
}

Why is it doing this?

The main reason why this hotfix is needed is because Windows Phone 8 has the wonderful feature of interpreting device-width as not the manufacturer's optimal viewport width, but the actual resolution size (I believe it is the only mobile platform to do this...). This means the only device to actually render everything perfectly is the Nokia Lumia 920 (their flagship product). All others will have side effects.

Originally, the solution you have is the recommended way to get around this by Microsoft, but, as you've seen, it's a little off the mark. This is because it forces the Browser to determine the width of the screen, not the actual manufacturer again, which in turn can have glitches (as you've seen).