Khôi phục thanh điều hướng bootstrap hoạt động trên máy tính không có trên iphone

Question

Thanh điều hướng cố định của tôi hoạt động tốt khi tôi đổi kích thước màn hình máy tính của mình xuống dưới 980px. Khi màn hình của tôi có kích thước 979px trở xuống, thanh trượt điều hướng sẽ hoạt động hoàn hảo.

Tuy nhiên, khi tôi đẩy mã lên Heroku và tải trang web trên iPhone 4S của tôi, thanh điều hướng của tôi không bị sụp đổ, nhưng có vẻ hơi khác một chút - phần float thả xuống bên dưới biểu tượng khiến nó trông lạ .

Đây là custom.css.scss tập tin của tôi:

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

Và đây là tiêu đề HTML của tôi:

<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

Hai điều tôi sẽ đề cập đến. Đảm bảo bạn đã đặt chế độ xem correcdt trong phần đầu của tài liệu html

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

Và thứ hai, tôi nhận thấy rằng các truy vấn phương tiện của bạn hơi phân tán. Tốt nhất là giữ chúng lại với nhau và tại END của tài liệu. Nếu chúng không nằm ở cuối CSS thì CSS khác sẽ ghi đè lên nó bất chấp truy vấn phương tiện.