Responsive Design in IE 10 on Windows Phone 8

Microsoft unfortunately broke responsive design in IE 10 on Windows Phone 8 by interpreting the meta/CSS viewport device-width as the actual resolution width, not the visual viewport width.

Microsoft will fix this bug in the next release of Windows Phone 8, however, in the meantime, you'll need JavaScript to fix the current buggy devices.

Here's the complete solution:

In your CSS, specify the viewport with the CSS Device Adaptation method:

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

In your markup, use the standard meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

In your markup, as the first JavaScript in the head, add:

(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);
    }
})();

This code specifically targets version IE Mobile 10.0 (I've also added an extra condition to ensure it only happens in IE), so future, fixed versions will be untouched. It's worth noting that JavaScript cannot be disabled on Windows Phone 8, so this code will always run.

For the whole story, read this: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html