Viewport for IE10& 11桌面，但不是移动 [英] Viewport for IE10 & 11 desktop, but not mobile

问题描述

我建立了许多回应式网站。我想支持IE10和IE11的快照模式，但我不能完全不打破对Windows Phone 8的支持。这是我目前使用的代码，在我的CSS：

  @media screen and（max-width：400px）{
 @ -ms-viewport {
 width ：device-width; 
} 
} 
  

它工作正常，但如果IE10 / t尽可能地捕捉到最小的位置，站点显示为缩小。如果我摆脱媒体查询，它在IE10 / 11在桌面和平板电脑上正确显示，但它显示为IE10移动在Windows Phone 8上的桌面网站。有没有办法解决这个问题，或者我只卡住了一半支持

$ b

使用Media Query，Windows 8：

使用媒体查询Windows Phone 8：

/ p>

没有Media Query，Windows 8：

没有媒体查询，Windows Phone 8：

解决方案

这是否是Bootstrap文档中概述的相同问题？如果是，请 getbootstrap.com/getting-started/#support-ie10-width有一个JS修复。从网站：

Windows Phone 8和Internet Explorer 10

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 ）[0] .appendChild（msViewportStyle）
} 
  

有关详细信息和使用指南，请阅读 Windows Phone 8和设备宽度。

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

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?

Screenshots:

With Media Query, Windows 8:

With Media Query Windows Phone 8:

Without Media Query, Windows 8:

Without Media Query, Windows Phone 8:

解决方案

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

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.

这篇关于Viewport for IE10& 11桌面，但不是移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！