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?

Whats the resolution of windows phone you are testing? 480*800? Are you referring to horizontal scrolling? — Prasanna Aarthi, Mar 28 '14 at 12:47
try adding this CSS -ms-touch-action: auto; touch-action: auto; — Prasanna Aarthi, Mar 28 '14 at 13:14
@aravind Sorry I couldn't able to identity the source of it. And the site runs in python and node js. So not able regenerate it as a fiddle — winnyboy5, Apr 04 '14 at 05:59
@aravind I try for that. Its a closed environment. Not for allowed external access. anyway i will try to get u a link...... — winnyboy5, Apr 04 '14 at 08:27
Try adding overflow: auto, or overflow: scroll to the body. I develop mobile websites too and they work just fine on WP. — user2793161, Apr 08 '14 at 16:23
possible duplicate of [How to disable scrolling temporarily?](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily) — Paul Sweatte, Jun 20 '14 at 02:04

score 0 · Accepted Answer · answered Sep 03 '14 at 13:03

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).

This solution is not working. At least it is not working in nokia lumia 525.Any more suggestion for this. — Vivek Parmar, Oct 19 '15 at 05:51

Website not scrolling in Windows Phone

1 Answers1

The Fix

Why is it doing this?