-ms-viewport的問題

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8 Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:

Internet Explorer 10並無將屏幕的寬度和視口（viewport）的寬度區別開，這就致使Bootstrap中的媒體查詢並不能很好的發揮做用。爲了解決這個問題，你能夠引入下面列出的這段CSS暫時修復此問題：

@-ms-viewport       { width: device-width; }

然而，這樣作會致使Windows Phone 8 設備按照桌面瀏覽器的方式呈現頁面，而不是較窄的「手機」呈現方式。爲了解決這個問題，還須要加入如下CSS和JavaScript代碼，直到微軟修復此問題。

@-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以瞭解更多信息。