collapse navst crollo che funziona sul computer non su iphone

Question

La mia barra di navigazione fissa funziona correttamente quando ridimensiono lo schermo del mio computer a un valore inferiore a 980px. Una volta che il mio schermo è 979px o meno, il collasso della barra di navigazione inizia e funziona perfettamente.

Tuttavia, quando spingo il codice su Heroku e carico il sito sul mio iPhone 4S, non solo la mia barra di navigazione non collassa, ma sembra un po 'diversa - il galleggiante a destra scende sotto il logo facendolo sembrare strano .

Ecco il mio custom.css.scss di 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); 
} 

Ed ecco la mia intestazione 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

due cose che vorrei menzionare. Assicurarsi di avere la finestra correcdt impostato nella testa del documento HTML

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

E in secondo luogo ho notato che domande che i media sono un po 'sparsi. È meglio conservare questi contenuti insieme e alla fine del documento. Se non sono alla fine del CSS, altri CSS lo sovrascriveranno nonostante la query multimediale.