IE10 和视口11 台式机，但不是移动设备 [英] Viewport for IE10 & 11 desktop, but not mobile

问题描述

我建立了很多响应式网站.我想支持 IE10 和 IE11 的捕捉模式，但如果不破坏对 Windows Phone 8 的支持，我就无法完全实现.这是我目前在 CSS 中使用的代码:

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;
    }
}

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

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?

截图:

使用媒体查询，Windows 8:

With Media Query, Windows 8:

使用媒体查询 Windows Phone 8:

With Media Query Windows Phone 8:

没有媒体查询，Windows 8:

Without Media Query, Windows 8:

没有媒体查询，Windows Phone 8:

Without Media Query, Windows Phone 8:

推荐答案

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

Is this the same issue as outlined in the Bootstrap documentation? If so, getbootstrap.com/docs/3.3/getting-started/#support-ie10-width has a JS fix. From the site:

Internet Explorer 10 不区分设备宽度和视口宽度，因此不能正确应用 Bootstrap 的 CSS 中的媒体查询.为了解决这个问题，您可以选择包含以下 CSS 和 JavaScript 来解决此问题，直到 Microsoft 发布修复程序.

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

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

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

这篇关于IE10 和视口11 台式机，但不是移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！