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:

Answer 1

这与Bootstrap文档中列出的问题相同吗？如果是这样,getbootstrap.com/docs/3.3/getting-started/#support-ie10-width有一个JS修复程序.从网站:

Windows Phone 8和Internet Explorer 10

Internet Explorer 10不区分设备宽度和视口宽度,因此无法在Bootstrap的CSS中正确应用媒体查询.要解决此问题,您可以选择包括以下CSS和JavaScript来解决此问题,直到Microsoft发布修复程序.

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

有关更多信息和使用指南,请阅读Windows Phone 8和设备宽度.