bootstrap导航栏崩溃在计算机上工作而不是在iphone上

Question

当我将计算机屏幕调整到980px以下时,我的固定导航栏工作正常.一旦我的屏幕为979px或更低,导航栏崩溃就会启动并完美运行.

但是,当我将代码推送到Heroku并在我的iPhone 4S上加载网站时,我的导航栏不仅没有崩溃,而且看起来有点不同 - 浮标右下方的徽标使其看起来很奇怪.

这是我的 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);
}

这是我的标题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

我会提到两件事.确保在html文档的头部设置了correcdt视口

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

And secondly I noticed that you media queries are a bit scattered. It is best to keep these contained together and at the END of the document. If they are not at the end of the CSS then other CSS will overwrite it despite the media query.