SuperMan

- 走向 WEB 艺术家的路程

Bootstrap且学且珍惜-Bootstrap兼容IE8问题

bootstrap3在支持ie8以后,如何可以让ie8只显示电脑版,不要跟浏览器宽度变化变成手机版?

前端开发过程中如果使用过Bootstrap不知道大家遇到这个情况没有,IE8浏览器下,访问Bootstrap页面,PC宽屏情况下,也会被响应式为手机端。这种情况下体验性很不好。作为一个专业的前端程序员,需要考虑用户群,低版本IE,也要尽量做到兼容。所以面对领导或者客户的近乎完美的要求:(IE8低版本浏览器,实现响应式,实现页面兼容)。着实不易,Bootstrap且学且珍惜


依照官网,给网站加入如下了 respons.js等支持,ie8已经可以正常显示网页内容了。

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>      
   <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

可是,ie8下也随之变成自适应的网站了。
可不可以让ie8只显示电脑版的样式(包括bootstrap自带的hidden,nav之类的),不要显示手机版样式呢?

css文件必须也要放在同一个域名和子域名下面。
另外,检查一下 html 文档的 doctype 声明是否正确。
<meta name="viewport" content="width=device-width, initial-scale=1">
上面的代码是否添加到 header 元素内?

Bootstrap ie8 下支持响应式关键是要添加如下两个文件:

v3.bootcss.com 网站的源码中可以看到。

但是 respond.min.js 收到 浏览器同源 策略的限制,如果你希望这些文件都能够发挥作用的话,切记把所有css文件和 respond.min.js 文件都放到同一个域名下。

Golaravel.com 网站并没有考虑支持 ie8 的响应式支持,所以根本没有加载上述两个文件。




评论