Question

在chrome dev工具中，我获得了移动视图，但是直播bootstrap似乎只是给了我迷你版的网站

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" content="chrome=1">


  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/home-slider.css">

</head>
<body>

  <div class="container-fluid">
    <div class="row content">

      <div class="col-xs-12 col-sm-3 sidenav">
        <div class="navbar-header navbar navbar-default">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
          <span class="visible-xs navbar-brand">menu</span>
        </div>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <div id="logo-div">
            <img id="tri-img" src="src/dist/image/...jpg" alt="logo" />
          </div>
          <h4 id="title">Title</h4>
          <h4 id="subtitle">Subtitle</h4>
          <ul class="nav">
            <li><a href="index.html"><span class="liner">Home</span></a></li>
            <li class="port-main-title"><a href="portfolio.html" data-target="#item2" data-toggle="collapse" data-parent="#stacked-menu">Portfolio<span class="caret arrow"></span></a></li>
            <li><a href="profile.html">Profile</a></li>
            <li><a href="process.html">Process</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul><br>
        </div>
      </div>
        <!--  begin carousel -->

        <div class="col-xs-12 col-sm-9">
          <div id="carousel" class="carousel carousel-fade" data-ride="carousel-fade" data-interval="5000" data-pause="false">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item img-responsive center-block active">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>
              <div class="item img-responsive center-block">
              </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel" role="button">
              <span class="glyphicon glyphicon-chevron-leftt" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel" role="button">
              <span class="glyphicon glyphicon-chevron-rightt" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <!--/ carousel -->
        </div>


        <!-- / carousel -->
    </div>
  </div>

  <script type="text/javascript">
  $(function() {
    $('#myCarousel').carousel();
});

  </script>

  <script src="./bower_components/jquery/dist/jquery.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
  <script src="./bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
  <!-- build:js scripts/main.js -->
  <script src="./js/main.js"></script>
  <!-- <script src="js/bootsnipp.js" charset="utf-8"></script> -->
  <script src="./js/slide.js" charset="utf-8"></script>


</body>
</html>

＆＃13;

之前我没有使用过bootstrap，并且认为我遵守了规则。再次，在我的Chrome设备工具和浏览器模拟器，如ipadpeek和responsusimulator它似乎工作，但不是在Android手机或平板电脑等现场设备上？

Answer 1

从视口元标记中删除maximum-scale=1，以便将其设置为此..

<meta name="viewport" content="width=device-width, initial-scale=1.0">

col-xs-12无法在移动设备上运行

1 个答案: