Bootstrap 在 IE8 上显示平板电脑版本答案

【问题标题】：Bootstrap displays tablet version on IE8Bootstrap 在 IE8 上显示平板电脑版本
【发布时间】：2014-10-20 01:46:10
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. </p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus.  </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->


<!-- Placed at the end of the document so the pages load faster --> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

这是 HTML 代码。也包括了respond.js。但是在ie8中该站点仍然显示为移动版本。

我正在使用 Bootstrap 版本 3.1.1。奇怪的是我建立了一个类似版本的网站，没有这个问题。请提出解决方案

【问题讨论】：

只是猜测：Bootstrap 3 是移动优先的，respond.js 被包裹在条件 CSS <!--[if lt IE 9]> 中，这意味着响应式代码只会在 IE9 中加载？
lt（小于）选择所有低于 9 的版本。但我通过删除 cmets 进行了测试，但结果仍然相同。
按 F12 打开您的开发工具。单击网络选项卡，单击开始捕获，然后重新加载您的页面。记下任何 404。
我终于让它工作了。糟糕的是，我没有使用本地服务器对其进行测试。知道为什么它在作为本地文件运行时不起作用。？
由于安全限制，一些浏览器不允许response.js从file:// url运行，最好从本地网络服务器运行

标签： jquery css twitter-bootstrap internet-explorer-8 twitter-bootstrap-3

【解决方案1】：

将respond.js文件放入项目文件夹中。

  https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js

【讨论】：

请在直播服务器上查看
它在本地服务器上对我有用，但不适用于本地文件。我在之前的 cmets 中提到过。