ブートストラップnavbarコンピュータがiphoneにない場合の作業

Question

コンピュータの画面を980px以下にリサイズすると、固定されたnavbarが正常に動作します。画面が979px以下になると、navbarが崩壊して完全に動作します。

しかし、コードをHerokuにプッシュしてiPhone 4Sでサイトを読み込むと、ナビゲーションバーが崩壊するだけでなく、少し違って見える - ロゴの下にフロートが右下に表示され、奇妙に見える。ここ

@import "bootstrap"; 
@import "bootstrap-responsive"; 

/* universal */ 

html { 
overflow-y: scroll; 
} 

body { 
padding-top: 61px; 
} 

@media (max-width: 979px) and (min-width: 768px) { 
body { 
    padding-top: 0; 
} 
} 

@media (max-width: 768px) { 
body { 
    padding-top: 0; 
} 
} 

section { 
    overflow: auto; 
} 

textarea { 
resize: vertical; 
} 

.center { 
text-align: center; 
} 

.center h1 { 
margin-bottom: 10px; 
} 

.container { 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 
max-width: 1000px; 
} 

.span4 { 
width: 323px; 
margin-left: 20px; 
text-align: center; 
} 

@media (max-width: 767px) { 
#footer { 
    margin-left: -20px; 
    margin-right: -20px; 
    padding-left: -20px; 
    padding-right: -20px; 
} 
} 

/* typography */ 

h1, h2, h3, h4, h5, h6 { 
line-height: 1; 
} 

h1 { 
font-size: 3em; 
letter-spacing: -2px; 
margin-bottom: 30px; 
text-align: center; 
} 

h2 { 
font-size: 1.7em; 
letter-spacing: -1px; 
margin-bottom: 30px; 
text-align: center; 
font-weight: normal; 
color: $grayLight; 
} 

p { 
font-size: 1.1em; 
line-height: 1.7em; 
} 

/* header */ 

#logo { 
float: left; 
font-size: 1.7em; 
color: #555555; 
text-transform: uppercase; 
letter-spacing: -1px; 
padding-top: 5px; 
font-weight: bold; 
line-height: 2; 
} 

#logo:hover { 
text-decoration: none; 
} 

.navbar-inner { 
min-height: 60px; 
} 

.navbar .nav { 
margin: 0 -13px 0 0; 
} 

.navbar-fixed-top .navbar-inner { 
box-shadow: none; 
border-bottom: 1px solid #d4d4d4; 
} 

.navbar .btn-navbar { 
margin-top: 16px; 
} 

li { 
line-height: 40px; 
list-style: none; 
} 

#smedia { 
padding: 10px 9px 10px 0px; 
font-size: 16px; 
text-shadow: none; 
} 

.navbar .divider-vertical { 
margin: 10px 9px; 
border-left: 1px solid rgb(218,218,218); 
} 

そして、私のヘッダーHTMLです：：私が言及だろう

<header class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
    <button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <%= link_to "Professional Workroom of Design", root_path, id: "logo" %> 
    <div class="nav-collapse collapse" style="height: 0px;"> 
    <ul class="nav pull-right"> 
     <li class="divider-vertical"></li> 
     <li> 
     <a href="#" id="smedia"> 
      <span class="icon-stack"> 
      <i class="icon-sign-blank icon-stack-base"></i> 
      <i class="icon-linkedin icon-light" style="font-size: 22px;"></i> 
      </span> 
     </a> 
     </li> 
     <li> 
     <a href="#" id="smedia"> 
      <span class="icon-stack"> 
      <i class="icon-sign-blank icon-stack-base"></i> 
      <i class="icon-google-plus icon-light" style="font-size: 22px;"></i> 
      </span> 
     </a> 
     </li> 
     <li> 
     <a href="#" id="smedia"> 
      <span class="icon-stack"> 
      <i class="icon-sign-blank icon-stack-base"></i> 
      <i class="icon-twitter icon-light" style="font-size: 22px;"></i> 
      </span> 
     </a> 
     </li> 
     <li> 
     <a href="#" id="smedia"> 
      <span class="icon-stack"> 
      <i class="icon-sign-blank icon-stack-base"></i> 
      <i class="icon-facebook icon-light" style="font-size: 22px;"></i> 
     </span> 
     </a> 
     </li> 
     <li class="divider-vertical"></li> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "Portfolio", portfolio_path %></li> 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Contact", contact_path %></li> 
    </ul> 
    </div> 
    </div> 
</div> 
</header> 

Answer 1

2つのことが

は、ここに私のcustom.css.scssファイルです。あなたは、HTMLドキュメント

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /> 

そして第二に、私はあなたのメディアクエリは、ビットを散在していることに気づいたの先頭に設定correcdtビューポートを持っていることを確認します。これらをまとめて、文書の最後に保管することが最善です。 CSSの最後になければ、他のCSSはメディアクエリにもかかわらず上書きします。