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

Question

当我将我的电脑屏幕调整到 980 像素以下时，我的固定导航栏工作正常。一旦我的屏幕为 979 像素或更小，导航栏折叠就会启动并完美运行。

但是，当我将代码推送到 Heroku 并在我的 iPhone 4S 上加载该站点时，我的导航栏不仅没有折叠，而且看起来有点不同—— float 右侧落在 Logo 下方，导致它看起来很奇怪。

这是我的 custom.css.scss 文件:

@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 文档的头部设置了正确的视口(viewport)

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

其次，我注意到您的媒体查询有点分散。最好将它们放在一起并放在文档的末尾。如果它们不在 CSS 的末尾，那么其他 CSS 将覆盖它，尽管有媒体查询。