@-ms-viewport rule doesn't work in WP8 IE10

[stowball]

I've written a post explaining that it doesn't work here: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

You need to use this instead:

@media (max-width: 400px) { /* or 25em to be "responsibly responsive" */
    @-ms-viewport {
        width: 320px;
    }
}

[stowball]

Microsoft have offered a solution to the viewport bug. I've described it here: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html#update-2013015

Basically, they want us to continue using

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

and then using a script immediately after the CSS to modify the viewport for IE 10.0 only

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