Fix IE 10 on Windows Phone 8 Viewport

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

#Quick backstory

For IE 10 (desktop) to work in it’s new “snap mode” you need to use this:

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

But that screws up some Windows Phone 8 phones, overriding the meta viewport tag and rendering as far too large on small screens. So the answer, for now, is this gnarly device detection/injection script.

#Longer backstory

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.