Bootstrap在windows phone 8下不兼容的解決方法
發(fā)布時(shí)間：2014-07-18 12:06:17 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了Bootstrap在windows phone 8下不兼容的解決方法,需要的朋友可以參考下
bootstrap是一款非常優(yōu)秀的前端UI開發(fā)框架,特別在開發(fā)自適應(yīng)網(wǎng)頁應(yīng)用廣泛。然而bootstrap在windows phone 8中會(huì)出現(xiàn)整個(gè)屏幕變得很小的情況。經(jīng)過分析找出原因是:
bootstrap.css文件中有這樣一行代碼:
復(fù)制代碼
代碼如下:@-ms-viewport {
width: device-width;
}
width: device-width;
}
這行代碼作用是:頁面寬度被設(shè)置成設(shè)備的寬度.而在實(shí)際中,我并不是我想要的結(jié)果,我們需要根據(jù)我的網(wǎng)頁內(nèi)容自動(dòng)適應(yīng)。
經(jīng)過測試，得出下面的解決方案代碼(放在header里腳本中):
復(fù)制代碼
代碼如下: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);
}
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
相關(guān)文章
創(chuàng)建一個(gè)自己的bootstrap模板示例
這篇文章主要介紹了創(chuàng)建一個(gè)自己的bootstrap模板示例,需要的朋友可以參考下2014-05-06- 這篇文章主要介紹了bootstrap3顯示5列的方法,bootstrap是個(gè)12柵格的系統(tǒng)，顯示5列比較麻煩,這里提供一個(gè)方法，需要的朋友可以參考下2014-04-27
bootstrap3.0教程之排版詳細(xì)使用教程(標(biāo)題、頁面主體、強(qiáng)調(diào)、縮略語等
本次主要來了解bootstrap的排版，這個(gè)大部分在HTML的基本標(biāo)簽中也是存在的，所以相對(duì)比較簡單，為了保證系列的完整性，也順帶復(fù)習(xí)下，還是記錄一下。主要內(nèi)容如下：標(biāo)題、2014-04-11bootstrap3.0教程之柵格系統(tǒng)案例(包括柵格選項(xiàng)、從堆疊到水平排列、移
這篇文章主要介紹了bootstrap3.0教程之柵格系統(tǒng)案例,包括柵格選項(xiàng)、從堆疊到水平排列、移動(dòng)設(shè)備和桌面、Responsive column resets、列偏移、嵌套列、列排序,需要的朋友可以2014-04-11bootstrap3.0教程之柵格系統(tǒng)原理(布局)
Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。我在這里是把Bootstrap中的柵格系統(tǒng)叫做布2014-04-11- Bootstrap 是由Twitter 工程師推出的基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架2012-11-12
Bootstrap 基于jquery的簡潔靈活的流行前端框架及交互組件集
Bootstrap, from Twitter 基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架及交互組件集2014-11-18
