Design responsivo no IE 10 no Windows Phone 8

A Microsoft, infelizmente, quebrou o design responsivo do IE 10 no Windows Phone 8 ao interpretar a largura do dispositivo da janela de visualização meta / CSS como a largura de resolução real, não a largura da janela de visualização visual.

A Microsoft irá corrigir esse bug na próxima versão do Windows Phone 8, entretanto, enquanto isso, você precisará do JavaScript para corrigir os dispositivos com erros atuais.

Aqui está a solução completa:

Em seu CSS, especifique a janela de visualização com o método CSS Device Adaptation:

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

Em sua marcação, use a metatag padrão:

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

Em sua marcação, como o primeiro JavaScript na cabeça, adicione:

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

Este código visa especificamente a versão IE Mobile 10.0 (também adicionei uma condição extra para garantir que isso aconteça apenas no IE), portanto, as futuras versões fixas não serão alteradas. É importante notar que o JavaScript não pode ser desabilitado no Windows Phone 8, portanto, esse código sempre será executado.

Para toda a história, leia isto: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html