Bootstrap在windows phone 8下不兼容的解決方法

bootstrap是一款非常優(yōu)秀的前端UI開(kāi)發(fā)框架,特別在開(kāi)發(fā)自適應(yīng)網(wǎng)頁(yè)應(yīng)用廣泛。然而bootstrap在windows phone 8中會(huì)出現(xiàn)整個(gè)屏幕變得很小的情況。經(jīng)過(guò)分析找出原因是:
bootstrap.css文件中有這樣一行代碼:
width: device-width;
}
這行代碼作用是:頁(yè)面寬度被設(shè)置成設(shè)備的寬度.而在實(shí)際中,我并不是我想要的結(jié)果,我們需要根據(jù)我的網(wǎng)頁(yè)內(nèi)容自動(dòng)適應(yīng)。
經(jīng)過(guò)測(cè)試,得出下面的解決方案代碼(放在header里腳本中):
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)題、頁(yè)面主體、強(qiáng)調(diào)、縮略語(yǔ)等
本次主要來(lái)了解bootstrap的排版,這個(gè)大部分在HTML的基本標(biāo)簽中也是存在的,所以相對(duì)比較簡(jiǎn)單,為了保證系列的完整性,也順帶復(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的簡(jiǎn)潔靈活的流行前端框架2012-11-12
Bootstrap 基于jquery的簡(jiǎn)潔靈活的流行前端框架及交互組件集
Bootstrap, from Twitter 基于HTML,CSS,JAVASCRIPT的簡(jiǎn)潔靈活的流行前端框架及交互組件集2014-11-18