windows phone8下使用Bootstrap螢幕變小解決方案

antzone發表於2017-03-12

Bootstrap雖說在老舊的瀏覽器中存在問題,但是標準瀏覽器的普及,它的使用率必然會越來越高,網站快速而美觀的開發也將越來越便利,Bootstrap在最新的裝置中一般沒有任何問題,但是在windows phone8下有一個相容性問題,就是它會讓螢幕顯示變小。

解決方案:

在bootstrap.css檔案中具有如下程式碼:

[CSS] 純文字檢視 複製程式碼
@-ms-viewport {
  width: device-width;
}

頁面寬度被設定成裝置的寬度.而在實際中,並不是想要的結果,需要根據我的網頁內容自動適應。

解決方案如下:

[JavaScript] 純文字檢視 複製程式碼
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);
}

相關文章