IE10 和 11 桌面的视口，但不是移动设备答案

【问题标题】：Viewport for IE10 & 11 desktop, but not mobileIE10 和 11 桌面的视口，但不是移动设备
【发布时间】：2013-11-08 15:46:18
【问题描述】：

我建立了很多响应式网站。我想支持 IE10 和 IE11 的快照模式，但是如果不中断对 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：

【问题讨论】：

这与 Bootstrap 文档中概述的问题相同吗？如果是这样，getbootstrap.com/getting-started/#browsers 有一个 JS 修复。
好的，谢谢！请张贴作为答案，以便我接受。我会更喜欢 CSS 修复，但必须这样做。

标签： css windows-8 windows-phone-8 internet-explorer-10 internet-explorer-11

【解决方案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 and Device-Width。

【讨论】：