Bootstrap在windows phone 8下不兼容的解决方法
发布时间：2014-07-18 12:06:17 作者：佚名 
我要评论
我要评论这篇文章主要为大家介绍了Bootstrap在windows phone 8下不兼容的解决方法,需要的朋友可以参考下
bootstrap是一款非常优秀的前端UI开发框架,特别在开发自适应网页应用广泛。然而bootstrap在windows phone 8中会出现整个屏幕变得很小的情况。经过分析找出原因是:
bootstrap.css文件中有这样一行代码:
复制代码
代码如下:@-ms-viewport {
width: device-width;
}
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);
}
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
相关文章
- 这篇文章主要介绍了创建一个自己的bootstrap模板示例,需要的朋友可以参考下2014-05-06
- 这篇文章主要介绍了bootstrap3显示5列的方法,bootstrap是个12栅格的系统，显示5列比较麻烦,这里提供一个方法，需要的朋友可以参考下2014-04-27
bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略语等
本次主要来了解bootstrap的排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单，为了保证系列的完整性，也顺带复习下，还是记录一下。主要内容如下：标题、2014-04-11bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移
这篇文章主要介绍了bootstrap3.0教程之栅格系统案例,包括栅格选项、从堆叠到水平排列、移动设备和桌面、Responsive column resets、列偏移、嵌套列、列排序,需要的朋友可以2014-04-11- Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布2014-04-11
- Bootstrap 是由Twitter 工程师推出的基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架2012-11-12
Bootstrap 基于jquery的简洁灵活的流行前端框架及交互组件集
Bootstrap, from Twitter 基于HTML，CSS，JAVASCRIPT的简洁灵活的流行前端框架及交互组件集2014-11-18
最新评论