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 I'm currently using, in my CSS:

@media screen and (max-width:400px) {
    @-ms-viewport{
        width: device-width;
    }
}

It works alright, but if IE10/11 isn't snapped to the smallest position possible, the site displays as zoomed out. If I get rid of the media query, it displays correctly in IE10/11 on desktops and tablets, but it displays as the desktop site in IE10 mobile on Windows Phone 8. Is there a way around this, or am I stuck only half supporting IE10/11's snap modes?

Screenshots:

With Media Query, Windows 8:

With Media Query Windows Phone 8:

Without Media Query, Windows 8:

Without Media Query, Windows Phone 8:

Is this the same issue as outlined in the Bootstrap documentation? If so, http://getbootstrap.com/getting-started/#browsers has a JS fix. — Olly Hodgson, Oct 29 '13 at 13:18
Yes, thank you! Please post as an answer so I can accept it. I would've preferred a CSS fix, but this will have to do. — JacobTheDev, Oct 29 '13 at 14:41

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Viewport for IE10 & 11 desktop, but not mobile

1 Answers1

Windows Phone 8 and Internet Explorer 10

Linked