Viewport for IE10 & 11 desktop, but not mobile

Question

I build a lot of responsive sites. I\'d like to support IE10 and IE11\'s snap modes, but I can\'t do it fully without breaking support for Windows Phone 8. This is the code

Answer 1

Is this the same issue as outlined in the Bootstrap documentation? If so, getbootstrap.com/docs/3.3/getting-started/#support-ie10-width has a JS fix. From the site:

Windows Phone 8 and Internet Explorer 10

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.

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

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

For more information and usage guidelines, read Windows Phone 8 and Device-Width.