Bootstrap在windows phone 8 下不相容解決方案

bootstrap是一個很好的前端UI開發架構,特別在開發自適應網頁應用盛廣.我們項目在開發中碰到一小問題:bootstrap在windows phone 8整個螢幕變得很小.原因是:

bootstrap.css檔案中有這樣一行代碼:

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

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

下面的解決方案代碼(放在header裡指令碼中):

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