css - IE10 和 11 桌面的视口(viewport)，但不是移动设备

Question

我建立了很多响应式网站。我想支持 IE10 和 IE11 的 snap 模式，但我不能在不破坏对 Windows Phone 8 的支持的情况下完全做到这一点。这是我目前在我的 CSS 中使用的代码:

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

它工作正常，但如果 IE10/11 没有对齐到尽可能小的位置，该站点将显示为缩小。如果我去掉媒体查询，它会在台式机和平板电脑的 IE10/11 中正确显示，但在 Windows Phone 8 的 IE10 移动版中显示为桌面站点。有没有办法解决这个问题，或者我只支持一半IE10/11 的快照模式？

截图:

使用媒体查询，Windows 8:

使用媒体查询 Windows Phone 8:

没有媒体查询，Windows 8:

没有媒体查询，Windows Phone 8:

Answer 1

这是否与 Bootstrap 文档中概述的问题相同？如果是这样，getbootstrap.com/docs/3.3/getting-started/#support-ie10-width有一个 JS 修复。来自网站:

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.