适用于IE10和View的视口11桌面，但不是移动

Question

我建立了很多自适应网站。我想支持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的快照模式？

截图：

使用Media Query，Windows 8：

使用Media Query 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和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。