2016-03-25 17 views
0

çalışmıyor, ama canlı önyükleme sadececol-xs-12 Mobil görünüm elde krom dev araçları, mobil

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

Ben ettik bana sitenin mini versiyonu vermek gibi görünüyor Önceden kullanılan bootstrap ve kuralları takip ettim. Yine, krom cihaz araçlarında ve ipadpeek ve responsusimulator gibi tarayıcı simülatörleri üzerinde çalışıyor gibi görünüyor, ama android mobil veya tablet gibi canlı cihazlarda değil mi? Bu ayarlandığında, böylece

cevap

0

görünüm meta etiketinden maximum-scale=1 çıkarın ..

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

+0

sayesinde simülatörleri çalışır ama yine de mobil duyarlı bir düzen almıyor hızlı tepki için, özellikle Im a bakarak hala krom cihaz simülatöründe komik görünmek ve hem de canlı cihaz moto g 519x360px. Bu belirli tarayıcı boyutunda veya bu belirli cihazla ilgili bir sorun mu görünüyor? Ama ben maksimum ölçekli = 1 aldım. Teşekkürler. – user3019558