Responsive design fix for Windows Phone 8

Internet Explorer 10 doesn’t differentiate device width from viewport width, and thus doesn’t properly apply the media queries in your CSS.

In other words, that means that while the device might be rocking a 768px x 1280px it really is 384px x 640px as it has retina-ish screen like the iPhone. This is really annoying as all your media queries will be misunderstood by the browser.

To address this, you can optionally include the following CSS and JavaScript to work around this problem.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

Add this script above all other scripts and styles in your head element.

<script>
//Fix Windows phone
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);
}
</script>

This bug has already been reported and will probably soon be fixed in a future software update.

Share your thoughts on this

Your email address will not be published.