7

我建立了很多响应式网站。我想支持 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：

4

1 回答 1

12

这与 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 和 Device-Width。

于 2013-10-29T14:48:19.073 回答