I wanted to post the code I’ll be using to get responsive layouts to render properly in IE10 for both Snap Mode and Windows Phone 8. Tim Kadlec and Matt Stow have documented & championed the cause better than I ever could, so read their posts if you want the full story. Basically, I’m following the recommendation to use the following code to set viewport in my 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}

A fix is on the way to get Windows Phone 8 to recognize CSS pixels (preferred behavior) rather than device pixels. In the meantime, use this javascript before any other scripts in the head if you need an immediate patch:

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

Here’s the code and demo link (twa.lt/ietenvp) for my test. And thanks to Rey Bango for helping us with a fix.