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