bootstrap navbar collapse działa na komputerze nie na iphone

Question

Mój stały pasek nawigacyjny działa dobrze, gdy zmieniam rozmiar ekranu mojego komputera na mniej niż 980px. Gdy mój ekran ma rozmiar 979px lub mniej, zapadnia się i działa idealnie.

Jednakże, kiedy wysyłam kod do Heroku i ładuję stronę na moim iPhone 4S, mój navbar nie tylko się nie zwinął, ale wygląda nieco inaczej - pływak prawa spada pod logo powodując dziwne wrażenie .

Oto moja custom.css.scss file:

@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); 
} 

I tu jest mój nagłówek 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

dwie rzeczy chciałbym wspomnieć. Sprawdź, czy masz rzutnię correcdt ustawionej w nagłówku dokumentu HTML

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

A po drugie zauważyłem, że zapytań multimedialne są nieco rozproszone. Najlepiej przechowywać je razem i na końcu dokumentu. Jeśli nie są na końcu CSS, to inny CSS nadpisze go mimo zapytania o media.