2016-03-25 3 views
0

に取り組んでいない私は、モバイルビューを得るが、ライブブートストラップはちょうど私がいませんでした私のサイトCOL-XS-12クロームのdevのツールでは、モバイル

<!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>

のミニバージョンを与えているようです以前はブートストラップを使用していました。再び、私のChromeデバイスツールとipadpeekやresponsusimulatorのようなブラウザシミュレータでは動作するようですが、Android搭載端末やタブレットなどのライブデバイスでは使用できません。それはこれに設定されているので

答えて

0

ビューポートのメタタグからmaximum-scale=1を削除...

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

+0

感謝をシミュレータ上で動作しますが、それでも、モバイル応答レイアウトを得ていない迅速な対応のために、特にイム見てmoto g 519x360pxこれはまだクロムデバイスシミュレータとライブデバイスで面白く見えます。それはこの特定のブラウザサイズ、またはこの特定のデバイスの問題であるようですか?しかし、私は最大スケール= 1を出しました。ありがとう。 – user3019558

関連する問題